CSS盒子弹性布局

最新推荐文章于 2024-07-12 16:38:52 发布

LF2018131

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量301

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/LF2018131/article/details/117048284

版权

@[TOC]HTML+CSS 实现网页弹性布局

弹性盒子

基本知识及特性

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
特点：
灵活，常用于页面布局，解决屏幕的适配问题。
使用：

当使用盒子的弹性布局时，可以不用再使用" display: inline-block " 进行块级元素或行内元素到行内块元素的转化。
将display：flex; 添加到父级容器里面。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
基本语法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ourter {
            width: 400px;
            height: 400px;
            border: 1px solid #f40;
            display: flex;/*添加盒子的弹性布局*/
        }
        
        .inner {
            width: 100px;
            /* width: 98px; */
            height: 100px;
            border: 1px solid rgb(0, 0, 0);
            /* display: inline-block; */
            /* display: inline-block; */
            /*当使用盒子的弹性布局时，可以不用再使用 display: inline-block 
            进行块级元素或行内元素到行内块元素的转化*/
        }
    </style>
</head>

<body>

    <div class="ourter">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <!-- <div class="inner"></div> -->
    </div>
</body>

</html>

效果：在这里插入图片描述

布局可能出现的问题

盒子压缩变形

当容器增加到8个时，原定的width：100px 已经缩小变形。

<style>
        .ourter {
            width: 400px;
            height: 400px;
            border: 1px solid #f40;
            display: flex;
        }
        
        .inner {
            width: 100px;
            /* width: 98px; */
            height: 100px;
            border: 1px solid rgb(0, 0, 0);
            /* display: inline-block; */
        }
    </style>
</head>

<body>

    <div class="ourter">
        <div class="inner">盒子1</div>
        <div class="inner">盒子2</div>
        <div class="inner">盒子3</div>
        <div class="inner">盒子4</div>
        <div class="inner">盒子5</div>
        <div class="inner">盒子6</div>
        <div class="inner">盒子7</div>
        <div class="inner">盒子8</div>
    </div>
</body>

效果：
盒子挤在一行
原因：/* 弹性盒模型，可以规定盒子内的子元素默认按照水平方向排列默认不换行 */
解决方法：
style 部分不做改变，只对body 部分做出改变：
将8个小盒子分别装进两个盒子里面，4个一组。

<body>
    <div class="ourter">
    <!-- 添加第一个div -->
        <div>
            <div class="inner">盒子1</div>
            <div class="inner">盒子2</div>
            <div class="inner">盒子3</div>
            <div class="inner">盒子4</div>
        </div>
         <!-- 添加第二个div -->
        <div>
            <div class="inner">盒子5</div>
            <div class="inner">盒子6</div>
            <div class="inner">盒子7</div>
            <div class="inner">盒子8</div>
        </div>
    </div>
</body>

效果：
在这里插入图片描述
结果出现新问题。子代垂直排布。
原因：
默认垂直方向排列剩余的均分，即先把垂直方向填完。

子代垂直排列

解决方法：
回到上一步，不要添加 div 把它划分为两个模块，直接在父级里面添加样式：
flex-wrap: wrap;
在这里插入图片描述
若再添加一句align-items: center; 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

align-items用法: 链接.

推荐写法

<style>
        .ourter {
            width: 400px;
            height: 400px;
            border: 1px solid #f40;
            display: flex;
            /* 清除默认垂直排列 */
            flex-wrap: wrap;
            /* 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。 */
            align-items: center;
            /* 元素向侧轴起点对齐。*/
            /* align-content: flex-start; */
            /* 规定辅轴方向 （y）的排列方式   多个主轴时*/
            align-content: flex-start;
            /* 规定主轴方向 （y）的排列方式 */
            /* justify-content: center; */
            /* 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 */
            /* justify-content: space-between; */
            /* 每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 */
            justify-content: space-around;
        }
        
        .inner {
            /* width: 100px; */
            /* 将每个盒子大小减去边框的粗细，使之可以刚好排在一行 */
            width: 98px;
            height: 100px;
            border: 1px solid rgb(0, 0, 0);
            /* display: inline-block; */
        }
    </style>
</head>

<body>
    <div class="ourter">
        <!-- 添加第一个div -->
        <!-- <div> -->
        <div class="inner">盒子1</div>
        <div class="inner">盒子2</div>
        <div class="inner">盒子3</div>
        <div class="inner">盒子4</div>
        <!-- </div> -->
        <!-- 添加第二个div -->
        <!-- <div> -->
        <div class="inner">盒子5</div>
        <div class="inner">盒子6</div>
        <div class="inner">盒子7</div>
        <div class="inner">盒子8</div>
        <!-- </div> -->
    </div>
</body>

效果在这里插入图片描述
调整父级盒子与子盒子的大小，利用居中布局自己想要的模式。

LF2018131

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子弹性布局

@[TOC]HTML+CSS 实现网页弹性布局弹性盒子推荐学习地址：链接: CSS3 弹性盒子(Flex Box).居中特性了解：align-itemsjustify-contentalign-content可布局效果：基本知识及特性弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。特点：灵活，常用于
复制链接

扫一扫