flex 布局

flex 分为主轴和交叉轴。主轴由 flex-direction(row，row-reverse，column，column-reverse) 定义；交叉轴是相对于主轴而相应产生的，当以列(column)为主轴，那么交叉轴为行。

flex-wrap 用于决定 flex 布局中的元素是否换行展示。

上面二者的缩写： flex-flow: flex-direction flex-wrap;

flex：flex-grow，flex-shrink，flex-basis;

flex-basis：定义了该元素的空间大小.

flex-grow：如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有 1/4（各 50px）。

flex-shrink：处理 flex 元素收缩的问题

对齐：

交叉轴对齐：align-items(

• stretch
• flex-start
• flex-end
• center)

主轴对齐：justify-content(

• stretch
• flex-start
• flex-end
• center
• space-around
• space-between

)

参考：

归属于 Mozilla 贡献者的署名和版权许可在知识共享 署名—相同方式共享 2.5 许可下提供。