flex布局介绍

所谓的flex布局指的就是给父容器添加了 display: flex 属性, 就可以让容器内部打破原有文档流模式, 展现为弹性布局 。

flex属性

flex实际代表的是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写。
如下图

flex-grow:1

用于分配容器的剩余空间； 如果子元素的宽度加起来没有和父级盒子一样宽，这是父级盒子就会剩余一些空间，我们可以通过flex-grow将剩余的空间分配给所需子元素；
我们可以通过以下代码来进行理解该属性

        .box {
            display: flex;
            width: 500px;
            height: 100px;
            background-color: hotpink;
        }

        .box span {
            width: 100px;
        }

        .box span:nth-child(1) {
            flex-grow: 1;
            background-color: aqua;
        }
    </style>
	<div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

以上代码父级盒子的宽度是500，每一个span盒子的宽度是100，三个盒子加起来的总宽度没有等于或者大于父级盒子的宽度500；我们给第一个span盒子设置了flex-grow:1;表示将父级的所有剩余空间都分配给了第一个span；所以第一个span的宽度为100+父级剩余的200 = 300；

再比如以下代码：

        .box {
            display: flex;
            width: 500px;
            height: 100px;
            background-color: hotpink;
        }

        .box span {
            width: 100px;
        }

        .box span:nth-child(1) {
            flex-grow: 1;
            background-color: aqua;
        }

        .box span:nth-child(2) {
            flex-grow: 3;
            background-color: red;
        }

        .box span:nth-child(3) {
            flex-grow: 1;
            background-color: lawngreen;
        }
    </style>
    	<div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

以上代码父盒子剩余空间的200，按照以上代码将父盒子的剩余空间分成了5份

第一个盒子分配1/5，100+40 = 140

第二个盒子分配3/5，100+120=220

第三个盒子分配1/5，100+40= 140

flex-shrink:1

flex-shrink用来设置子盒子超过父盒子的宽度后，进行缩小的比例取值；

如果子元素的宽度加起来超出了父级元素的宽度，我们可以使用flex-shrink的取值来进行相应的比例缩小；

我们可以拿以下代码来理解

        .box {
            display: flex;
            width: 500px;
            height: 100px;
            background-color: hotpink;
        }

        .box span {
            width: 200px;
        }

        .box span:nth-child(1) {
            flex-shrink: 1;
            background-color: aqua;
        }

        .box span:nth-child(2) {
            flex-shrink: 3;
            background-color: red;
        }

        .box span:nth-child(3) {
            flex-shrink: 1;
            background-color: lawngreen;
        }
    </style>
 	<div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

以上代码表示：三个span的宽度加起来超出了父元素的宽度500，多出了100，然后利用flex-shrink多余的100px按照取值比例分配给各自的span；

第一个盒子：1/5 * 100 = 20 最终第一个盒子200-20=180

第二个盒子：3/5 * 100 = 60 最终第二个盒子200-60 = 140

第三个盒子：1/5 * 100 = 20 最终第一个盒子200-25=180

flex-basis:0%

设置盒子的基准宽度，取值一个长度单位或者一个百分比，规定灵活项目的初始长度。

如果basis和width同时存在会把width覆盖掉（干掉）；

        .box {
            display: flex;
            width: 500px;
            height: 100px;
            background-color: hotpink;
        }

        .box span {
            width: 200px;
        }

        .box span:nth-child(1) {
            flex-basis: 50px;
            background-color: aqua;
        }

        .box span:nth-child(2) {
            flex-basis: 150px;
            background-color: red;
        }

        .box span:nth-child(3) {
            flex-shrink: 50px;
            background-color: lawngreen;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

以上代码一开始给所有的span都统一设置了固定的宽度200，但又单独给每一个span设置了flex-basis，此时span原始的宽度width被flex-basis的取值覆盖干掉了哦！！

以上分析仅供参考哦！大家有什么建议可以讨论哦！！