flex布局

flex布局

Administrator 439 2021-11-13

Flex布局学习

flex布局模式解决了之前传统布局模式的繁琐 复杂,以及浮动控制等

使用flex布局只要指定父级元素 display: flex; 即可实现其下的子元素都为父元素的flex布局控制(每个子元素变成父级元素的一个项目)

1.用到的基本属性:

1.flex-direction: 设置主轴的方向

通过使用flex-direction属性可以实现控制子元素使用的是行排列还是列排列

flex-direction: row; // 行排列
flex-direction: column; // 列排列

还提供了两个reverse属性 能自动翻转元素!

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

justify-content: flex-start; // 如果是x轴 从左到右 y轴 从上到下
justify-content: flex-end;// x轴:从右到左 y轴:从下到上
justify-content: center;// 全部居中
justify-content: space-around;// 环绕排列 平分剩余空间
justify-content: space-between;// 保证两边贴边的情况下 再平分剩余空间

3.flex-wrap:设置子元素是否换行

很多场景下 比如一行我们原先只有3个元素 但突然来了四个元素 默认情况下 第四个元素是会直接缩小宽度/高度来满足摆放的

使用flex-wrap属性可以设置是否换行

flex-wrap: wrap; //换行
flex-wrap: nowrap; //不换行(默认)

4.align-items: 设置侧轴的方向(y轴)

align-items: flex-start; // 如果是x轴 从左到右 y轴 从上到下
align-items: flex-end;// x轴:从右到左 y轴:从下到上
align-items: center;// 全部居中
align-items: space-around;// 环绕排列 平分剩余空间
align-items: space-between;// 保证两边贴边的情况下 再平分剩余空间

5.align-centent: 设置侧轴的方向(y轴)(多行)

align-items: flex-start; // 如果是x轴 从左到右 y轴 从上到下
align-items: flex-end;// x轴:从右到左 y轴:从下到上
align-items: center;// 全部居中
align-items: space-around;// 环绕排列 平分剩余空间
align-items: space-between;// 保证两边贴边的情况下 再平分剩余空间
align-items: stretch;// 设置子元素高度平分父级元素高度