常见父项属性:
flex-direction | 设置主轴的方向 | row-----默认值从左到右; row-reverse-----从右到左 column-----从上到下 column-reverse-----从下到上 |
justify-content | 设置主轴上的子元素排列方式 | flex-start-----默认值从头部开始 flex-end-----从尾部开始 center-----在主轴居中对齐 space-around-----平分剩余空间 space-between-----先两边贴边再平分剩余空间 |
flex-wrap | 设置子元素是否换行 | nowrap-----默认值,不换行 wrap-----换行 |
align-content | 设置侧轴上的子元素的排列方式(多行) | flex-start-----默认值在侧轴的头部开始排列 flex-end-----在侧轴的尾部开始排列 center-----在侧轴中间显示 space-around-----子项在侧轴平分剩余空间 space-between-----子项在侧轴先分布在两头,再平分剩余空间 stretch-----设置子项元素高度平分父元素高度 |
align-items | 设置侧轴上的子元素的排列方式(单行) | flex-start-----从上到下 flex-end-----从下到上 center-----挤在一起居中(垂直居中) stretch-----拉伸 |
flex-flow | 复合属性,相当于同时设置了flex-direction和flex-wrap |
常见子项属性:
flex | 子项目占的份数(可以是百分比) |
align-self | 控制子项自己在侧轴的排列方式 |
order | 属性定义子项的排列顺序(前后顺序) |