父项属性
- flex-direction:设置主轴方向(row
默认横轴
,row-reverse,column,column-reverse) - justify-content:设置主轴元素排列方式(flex-start
默认,从头开始
,flex-end,从后开始,center 在主轴居中对齐,space-around 平分剩余空间,space-between ,两边贴住再平分) - flex-warp:设置子元素是否换行(
默认不换行
nowrap 换行 wrap) - align-content:设置侧轴上子元素的排列方式(多行)(flex-start
默认,从头开始
,flex-end,从后开始,center 在侧轴居中对齐,space-around 平分剩余空间,space-between ,两边贴住再平分,stretch,拉伸) - align-items : 设置侧轴上子元素的排列方式(单行)(stretch
默认,拉伸
,flex-start从头开始,flex-end,从后开始,center 在主轴居中对齐) - flex-flow:符合属性 等于设置flex-direction和flex-wrap 前后关系注意下
子项属性
- flex 属性 :表示占几份 写法: flex: //default:0; flex :1 =》flex:1 1 0
- align-self 控制子项自己在侧轴的排列方式 默认 auto 继承父元素
- order 定义项目排列顺序 数值越小越靠前 默认 0