← 返回首页
CSS3基础教程(十三)
发表时间：2020-03-11 13:07:48
讲解CSS3的弹性盒子

1.什么是弹性盒子

一个Flexbox布局是由一个伸缩容器（flex containers）和在这个容器里的伸缩项目（flex items）组成。

伸缩容器（flex containers）是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目（flex items）。

实例: 我们可以使用弹性盒子实现类似float的效果。

1.使用float实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            margin: 0px auto;
            text-align: center;
        }

        .main{
            width:400px;
            height:400px;
            background-color:#CFF;

        }
        .inner{
            width:100px;
            height:100px;
            line-height:100px;
            float:left;
        }
        #div1{
            background-color:#FF9;
        }
        #div2{
            background-color:#ccf;
        }

        #div3{
            background-color:#CCC;
        }
        #div4{
            background-color:#F9C;
        }
    </style>
</head>
<body>

<div class="main">
    <div class="inner" id="div1">
        我是DIV1
    </div>
    <div class="inner" id="div2">
        我是DIV2
    </div>
    <div class="inner" id="div3">
        我是DIV3
    </div>
    <div class="inner" id="div4">
        我是DIV4
    </div>
</div>

</body>
</html>

运行效果：

2.使用flex实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            text-align: center;
        }
        .main{
            width:400px;
            height:400px;
            background-color:#CFF;
            display: flex; /*使用弹性布局*/
        }
        .inner{
            width:100px;
            height:100px;
            line-height:100px;
        }
        #div1{
            background-color:#FF9;
        }
        #div2{
            background-color:#ccf;
        }

        #div3{
            background-color:#CCC;
        }
        #div4{
            background-color:#F9C;
        }
    </style>
</head>
<body>

<div class="main">
    <div class="inner" id="div1">
        我是DIV1
    </div>
    <div class="inner" id="div2">
        我是DIV2
    </div>
    <div class="inner" id="div3">
        我是DIV3
    </div>
    <div class="inner" id="div4">
        我是DIV4
    </div>
</div>

</body>
</html>

运行效果：

2.弹性盒子父元素常用属性

设置子元素在（主轴）水平方向的对齐方式 ，可以在父容器添加justify-content属性。 它有5个可能的值： flex-start：默认，左对齐，子元素在左边，空白在右边 flex-end：右对齐，子元素在右边，空白在左边 center：居中对齐，子元素在中间，空白在两边 space-between：第一个和最后一个子元素占据两端，中间区域用空白均分隔开 space-around：子元素均分所有空白

设置子元素在交叉轴(垂直方向)的对齐方式，可以在父容器添加align-items属性。 推荐子元素只有一排时使用 它有5个可能的值： flex-start：默认，顶对齐，子元素在顶部，空白在底部 flex-end：底对齐，子元素在底部，空白在顶部 center：居中对齐，子元素在中间，空白在两边 baseline: 项目的第一行文字的基线对齐 stretch：拉伸，如果项目未设置高度或设为auto，将占满整个容器的高度。

设置子元素是否换行和排列方向，可以在父容器添加flex-wrap属性。

设置主轴的方向（默认为水平方向）可以在父容器定义flex-direction属性。 元素排序的方向就是主轴方向，元素排列不下需要需要换行时的方向就是交叉轴方向 它有4个可能的值： row：水平方向（默认），从左到右排列 column：垂直方向，从上到下排列 row-reverse：水平反转 column-reverse：垂直反转

flex-wrap和flex-direction 可以简写成flex-flow 例如：flex-flow: row wrap

定义多根轴线的对齐方式(处理换行时的间隔)，可以在父容器定义align-content属性。 推荐有多排子元素时使用 注意：align-content与align-items不能同时设置。

3.弹性盒子子元素常用属性

flex-grow属性：定义项目的放大比例。 如果同一行的子元素未填满那一整行的话，子元素之间就会有间隔存在，flex-grow可以吸收这些间隔来扩展自己的宽度。 默认值为0,可以是小数，子元素根据这个属性的值按比例划分剩余空间。 语法：flex-grow：number 如果父容器一共有3个子元素，他们flex-grow分别为a,b,c，他们均分空白间隙空间的公式为 剩余空白空间 * a / (a+b+c) 剩余空白空间 * b / (a+b+c) 剩余空白空间 * c / (a+b+c)

flex-shrink属性： 定义缩小的比例。 语法：flex-shrink:number 如果设置了子元素不换行，当子元素的大小超出flex容器时，子元素就会自动收缩。 这个属性默认值为1，即所有的子元素收缩的比例一致，可以为每个子元素单独设置新的数值 如果所有项目都为0，则当空间不足时，项目撑破容器而溢出 下面的实例中，本来每个子元素都是正方形，即宽高都是100px，5个子元素总宽度就是500px，而flex容器只有400px，少了100px，而每个元素的 flex-shrink都为1，所以每个子元素都缩小 100/5=20px 最后每个元素的宽度为80px。

order 属性，order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 align-self属性。 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖父元素的align-items属性 可选值与align-items一致 flex-start：默认，顶对齐，子元素在顶部，空白在底部 flex-end：底对齐，子元素在底部，空白在顶部 center：居中对齐，子元素在中间，空白在两边 baseline: 项目的第一行文字的基线对齐 stretch：拉伸，如果项目未设置高度或设为auto，将占满整个容器的高度。 例如:

li:nth-of-type(1){
    align-self:center;
}

4.flex综合实例

使用弹性布局，实现大盒子里套十个小盒子，垂直和水平方向都居中，并且最后一行显示两个盒子。

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            text-align: center;
        }
        .main{
            width:440px;
            height:440px;
            background-color:#CFF;
            display: flex;
            justify-content: space-around;
            border: 1px solid #ccc;
            flex-flow: row wrap;
            align-content: space-around;
        }
        .inner{

            width:100px;
            /*height:100px;*/

            line-height:100px;

        }
        #div1{
            background-color:#FF9;
        }
        #div2{
            background-color:#ccf;
        }

        #div3{
            background-color:#CCC;
        }
        #div4{
            background-color:#F9C;
        }

        #div5{
            background-color: lightsalmon;
        }

        #div6{
            background-color: lightseagreen;
        }

        #div7{
            background-color: lemonchiffon;
        }

        #div8{
            background-color: deepskyblue;
        }

        #div9{
            background-color: crimson;
            flex-grow :1;
            margin: 0px 5px;
        }

        #div10{
            background-color: greenyellow;
            flex-grow :1;
            margin: 0px 5px;
        }
    </style>
</head>
<body>

<div class="main">
    <div class="inner" id="div1">
        我是DIV1
    </div>
    <div class="inner" id="div2">
        我是DIV2
    </div>
    <div class="inner" id="div3">
        我是DIV3
    </div>
    <div class="inner" id="div4">
        我是DIV4
    </div>
    <div class="inner" id="div5">
        我是DIV5
    </div>
    <div class="inner" id="div6">
        我是DIV6
    </div>
    <div class="inner" id="div7">
        我是DIV7
    </div>
    <div class="inner" id="div8">
        我是DIV8
    </div>
    <div class="inner" id="div9">
        我是DIV9
    </div>
    <div class="inner" id="div10">
        我是DIV10
    </div>

</div>

</body>
</html>

运行效果：