技术交流QQ群:1027579432,欢迎你的加入!
1.常见父项属性
- 以下有6个属性是对父元素设置的:
- flex-direction: 设置主轴的方向
- justify-content: 设置主轴上的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴上的子元素的排列方式(多行)
- align-items: 设置侧轴上的子元素排列方式(单行)
- flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
2.flex-direction设置主轴的方向[重点]
- 主轴与侧轴:在flex布局中,是分为主轴和侧轴两个方向。同样的叫法有:行和列、x轴和y轴。
- 默认的主轴方向是x轴方向,水平向右;
- 默认的侧轴方向是y轴方向,水平向下;
![默认的主轴和侧轴方向].png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzQwNzE3Ni02MGFmMTc0MjBjMWE0NWE4LnBuZw?x-oss-process=image/format,png)
- 属性值:flex-direction属性决定主轴的方向(即项目的排列方向)。注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,那剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
3.justify-content设置主轴上的子元素排列方式[重点]
- justify-content属性定义了项目在主轴上的对齐方式,注意:使用这个属性之前一定要确定好哪个是主轴。
4.flex-wrap设置子元素是否换行
- 默认情况下,项目都排在一条线(又称为轴线)上,flex-wrap属性定义,flex布局中默认是不换行的。
5.align-items设置侧轴上子元素的排列方式(单行)
- 该属性是控制子元素在侧轴(默认是y轴)上的排列方式,在子元素为单项(单行)时使用。
6.align-content设置侧轴上子元素的排列方式(多行)
- 该属性设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
7.align-content和align-items对比
- align-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸。
- align-content适用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结:单行找align-items,多行找align-content。
8.flex-flow
- flex-flow属性是flex-direction和flex-wrap属性的复合属性。
flex-flow: row wrap;