目录
1.flex-direction:设置主轴的方向①x轴row②y轴column③从右到左row-reverse④从下到上column-reverse
3.flex-wrap:设置子元素是否换行①换行wrap②不换行nowrap
5.align-items:设置侧轴上的子元素排列方式(单行)①从上到下flex-start②从下到上flex-end③居中center④拉伸(默认)stretch
6.flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap写法为:flex-flow:row wrap;x轴,自动换行
7.align-content(多行)和align-items(单行)的区别
1.按照flex子项目所占份数划分 flex:n或者是20%;
一:flex布局:
二: 父元素常见属性
1.flex-direction:设置主轴的方向①x轴row②y轴column③从右到左row-reverse④从下到上column-reverse![](https://i-blog.csdnimg.cn/blog_migrate/c4aa45534be1fc341f22c568fc2bef0f.png)
2.justify-content:设置主轴上的子元素排列方式①在主轴居中对齐center②从头部开始flex-start③平分剩余空间space-around④先两边贴边再平分剩余空间space-between⑤从尾部开始flex-end![](https://i-blog.csdnimg.cn/blog_migrate/9f2595d1acc83026290309967f71057f.png)
3.flex-wrap:设置子元素是否换行①换行wrap②不换行nowrap![](https://i-blog.csdnimg.cn/blog_migrate/32b7e3339cf00ce66f270866a21bbe43.png)
4.align-content:设置侧轴上的子元素的排列方式(多行)①在侧轴居中对齐center②从头部开始flex-start③平分剩余空间space-around④先两边贴边再平分剩余空间space-between⑤从尾部开始flex-end⑥设置子项元素高度平分父元素高度stretch![](https://i-blog.csdnimg.cn/blog_migrate/8adf554bd5b8ce9526d61a31dba7f977.png)
5.align-items:设置侧轴上的子元素排列方式(单行)①从上到下flex-start②从下到上flex-end③居中center④拉伸(默认)stretch![](https://i-blog.csdnimg.cn/blog_migrate/b5f7afb9a73b0208b231072f100c07e6.png)
6.flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap写法为:flex-flow:row wrap;x轴,自动换行
7.align-content(多行)和align-items(单行)的区别
三:flex布局子项常见属性
1.按照flex子项目所占份数划分 flex:n或者是20%;
2.align-self控制某个子项自己在侧轴上的排列方式
属性
1、auto默认值,元素继承了他父元素的align-item值,如果没有父元素则为stretch
2、stretch元素被拉伸以适应容器
3、center元素位于容器中心
4、flex-start元素位于容器的开头
5、flex-end元素位于容器的结尾
6、baseline元素位于容器的基准线上
7、initial 8、inherit