flex布局总结

--- flex 及 使用场景

• App 的 百分比布局，使用flex弹性布局来排布
• 微信小程序的布局就使用flex

容器：

• flex-direction：row / row-reverse / column / column-reverse （方向）
• flex-wrap：nowrap(默认) / wrap / wrap-reverse （换行）
• flex-flow：[flex-ditection] | [flex-wrap]
• justify-content：flex-start / flex-end / center / space-between / space-around （水平对齐方式）
• align-items：flex-start / flex-end / center （垂直方向对齐方式）
• align-content (多根轴线才起作用)：flex-start / flex-end / center / space-between / space-around / strech （垂直方向排列）

项目：

• order：0 <num> (排列顺序)
• flex-grow：0 （放大比例）占剩余空间的比例，0.5 则未占满的0.5空间
• flex-shrink：1 <num>（缩小比例）若沾满全部空间，则缩小对应比例
• flex-basis：auto <length> ，定义在分配多余空间之前，项目占主轴的空间
• flex：[flex-grow] | [flex-shrink] | [flex-basis]
• align-self：auto / flex-start / flex-end / center / baseline / stretch