flex布局之子元素flex的值

版权声明：本文为博主原创文章，未经博主允许不得转载。
flex布局之子元素flex的值这里分三种情况，一种是子元素的宽是相同的，即flex:1,另一种是三个子元素宽是不同的，即flex设置为不同的比例，如：1：6：1，另一种是有一个子元素的宽是固定的，这时flex的值可以设置为固定宽，比例，比例，如：200px:6:1,下面以代码进行说明：
html:

<div class="flex">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="flex1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="flex2">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

css为：

   .flex {
       display: flex;
   }
   .flex div {
       width: 200px;
       height: 200px;
       background: pink;
       margin: 10px;
       flex: 1;
   }
   .flex1 {
       display: flex;
   }
   .flex1 div {
       width: 200px;
       height: 200px;
       background: pink;
       margin: 10px;
   }
   .flex1 .one {
       flex: 1;
   }
   .flex1 .two {
       flex: 6;
   }
   .flex1 .three {
       flex: 1;
   }
   .flex2 {
       display: flex;
   }
   .flex2 div {
       width: 200px;
       height: 200px;
       background: pink;
       margin: 10px;
   }
   .flex2 .one {
       flex: 200px;
   }
   .flex2 .two {
       flex: 6;
   }
   .flex2 .three {
       flex: 1;
   }

则三个的效果如图所示：