一、简介
- 又名伸缩布局、弹性布局、伸缩盒布局、
- 更适用于移动端
- 布局原理，添加
display: flex; - 父盒设为
flex后，子元素的float、clear、vertical-align属性失效
二、常见父项属性
flex-direction 设置主轴方向
- 属性
row（默认） row-reversecolumncolumn-reverse
justily- content 主轴上的子元素排列方式
flex-startflex-endcenter-
space-around平分剩余空间 -
space-between两边贴边，中间平分
flex-wrap 子元素是否换行
-
nowrap默认 wrap
align-content 子元素的排列方式（多行）
flex-startflex-endcenterspace-aroundspace-between-
stretch拉伸
align-items 侧轴上的子元素排列方式（单行）
flex-startflex-endcenter-
stretch拉伸
flex-flow 复合flex-direction、flex-wrap`
三、常见子项属性
flex 在父盒子中所占份数
- 默认0
align-self 在父盒侧轴上的排列方式
- 高于父盒的
align-items属性
order 在父盒中的排列顺序
- 默认0，设为负数既可排在前面
