参考:css弹性盒子—桃园三兄弟之:flex-grow、flex-shrink、flex-basis详解

    1. <style>
    2.   div {
    3.     display: flex;
    4.   }
    6.   section {
    7.     height: 100px;
    8.     margin: 0 10px;
    9.     background-color: red;
    10.   }
    11. </style>
    13. <body>
    14.   <div>
    15.     <section style="flex:0 0 200px"></section>
    16.     <section style="flex:1"></section>
    17.     <section style="flex:0 0 200px"></section>
    18.   </div>
    19. </body>

    使用flex实现三栏布局, 两边固定, 中间自适应 - 图1

    • flex中0 0 auto的分别表示的是flex-grow, flex-shrink, flex-basis
    • flex-grow 默认值是 0 表示 父元素盒子大于子盒子宽度之后, 并且父元素有剩余, 然后设置flex-grow属性的盒子值不等于0的就开始按照比例进行分隔
    • flex-shrink 默认值是1 表示 父元素盒小于子盒子宽度之后, 设置flex-shrink元素的盒子且值不等于0的开始按照比例进行收缩
    • flex-basic 设置盒子的初始大小, 可以为准确的大小可以为百分比也可以是auto分配父元素剩余空间