是什么

flex： 弹性盒子

容器属性

• flex-direction： 排列方向
• flex-wrap：是否换行
• flex-flow： flex-direction, flex-warp简写
• just-content： 水平排列方式
• align-items： 垂直排列方式
• align-content： 多轴对齐方式（单轴无效）

项目属性

• flex： flex-grow, flex-shrink,flex-basis简写

flex: 1 = flex: 1 1 0%

• order：排序，值越小，越靠前
• flex-grow： 放大， 0不放大
• flex-shrink：缩小， 0不缩小
• flex-basis： auto，一般不用
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

应用场景

• 水平垂直居中
• 布局
• 移动端
• 小程序