css中的display flex

这篇文章不是说display flex布局的是说flex布局下的子内容，子盒子怎么显示布局，占据父盒子空间的

第一次遇到是：flex: 1

flex: 1 就是让子盒子平分父盒子的空间
自动调整子盒子的宽度以占满父盒子的空间

flex语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

默认值： 0 1 auto
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

分开说吧

flex-grow

经过测试
在设置flex-grow：0 时flex-grow不起作用

应用场景

例如
当我想把flex盒子里的子盒子全部占满空间就可以设置flex-grow: 1

效果如下图

代码

#main {
        width: 350px;
        height: 100px;
        border: 1px solid #C3C3C3;
        display: flex;
      }
      #main div {
        flex-shrink: 0;
        flex-grow: 1;
        flex-basis: 40px;
      }
      #main div:nth-child(2) {
        /* flex-basis: 40px; */
        /* flex-grow: 1; */
      }
<div id="main">
     <div style="background-color:coral;"></div>
       <div style="background-color:lightblue;"></div>
       <div style="background-color:khaki;"></div>
       <div style="background-color:pink;"></div>
       <div style="background-color:lightgrey;"></div>
   </div>

经过测试
只要父盒子是flex布局，他的子盒子中有一个是flex-grow: 1
将填满整个盒子，占满整个父盒子，下图中的第二盒子设置了flex-grow:1

flex-shrink

应用场景

当父盒子设置了flex，所有的子盒子宽度加起来超过父盒子的宽度
不管是flex-basis你设置了多少，子盒子都会自动计算自己的宽度进行缩小全部放在父盒子内不超出父盒子

下面的代码实例，所有的子盒子宽度都为80px,总共5个，400px已经超出父盒子最大宽度
使用flex-shrink：1将自动调整所有的子盒子宽度，变为70px,总共350px，正好等于父盒子的宽度

#main {
        width: 350px;
        height: 100px;
        border: 1px solid #C3C3C3;
        display: flex;
      }
      #main div {
        flex-shrink: 1;
        flex-grow: 0;
        flex-basis: 80px;
      }
      #main div:nth-child(2) {
        /* flex-basis: 40px; */
        /* flex-grow: 3; */
      }
<div id="main">
       <div style="background-color:coral;"></div>
       <div style="background-color:lightblue;"></div>
       <div style="background-color:khaki;"></div>
       <div style="background-color:pink;"></div>
       <div style="background-color:lightgrey;"></div>
   </div>

flex-basis

上面的flex-shrink已经提到过了，他的用法主要是设置每一个子盒子的宽度，当你设置子盒子的宽度又设置他的flex-basis的基准宽度后他的宽度不生效