display:flex; 让父元素变成伸缩盒布局，子元素默认水平排列（row）；
flex-wrap:wrap;换行；
flex-direction：column；子元素竖着排列；
flex 是 flex-grow、flex-shrink、flex-basis的缩写
flex-grow：定义弹性盒子项（flex item）的拉伸因子
flex-grow: 3;
flex-grow:inherit;
// 常用flex属性 有一串数字123456789
display: flex;
flex-direction: column; // 排列：row: 1～9 从左到右排列 row-reverse 从右到左 9～1排列
column: 1～9 从上到下排列 column-reverse 从下到上 9～1排列
align-items: flex-start; // 起始位置
align-items: center; // 中间位置
align-items: flex-end; // 最后位置
justify-content: flex-start; // 起始位置
justify-content: center; // 中间位置
justify-content: flex-end; // 最后位置
align-items和justify-content组合起来就类似一个九宫格
<body>
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
</body>
flex-shrink：flex子项
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
flex-basis： flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
