CSS学习笔记(01)flex布局

1、首先对父元素设置disiplay：felx， 其有6个属性

fex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

2、 justify-content 设置主轴上的子元素排列方式

3、align-items 设置侧轴上的子元素排列方式(单行)

4、align-content 设置侧轴上的子元素的排列方式(多行)

5、align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content

6、flex-flow 属性是 flex-direction和flex-wrap 属性的复合属性

flex-flow:row wrap;相当于flex-direction:row和flex-wrap:wrap

7、flex布局子项常见属性

1. flex子项目占的份数
2. align-self控制子项自己在侧轴的排列方式
3. order属性定义子项的排列顺序（前后顺序）

7.1 flex属性

7.2圣杯布局

参考：09-子项flex属性使用_哔哩哔哩_bilibili