CSS-伸缩布局

伸缩布局

伸缩容器

设置了display : flex ; 属性的元素

伸缩项

伸缩容器中的子元素

主轴

默认水平排列( 成一行 ) , 也可以垂直排列( 成一列 ) , 这个排列方向成为主轴.

辅轴

与主轴垂直的方向成为辅轴

主尺寸

水平布局时的宽度或垂直布局时的高度. 称主轴方向的这个尺寸为主尺寸

---

主轴方向

在伸缩布局中, 默认情况下水平方向是主轴, 主轴的起点在伸缩容器的最左边,所有的伸缩项都是从主轴的起点开始排版的

修改主轴起点的位置

flex-direction: 用于修改主轴起点的位置

• row: 起点在伸缩容器的最左边, 终点在伸缩容器的最右边. 从左至右的排版, 默认的取值
• row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版
• column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版
• column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版

注意

在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会发生变化

---

对齐与空间

沿主轴的排列为排布( justification ), 沿辅轴的排列为对齐( alignment )

主轴排布

justify-content: flex-start; 主轴上伸缩项对齐的默认值

与主轴起点对齐

justify-content: flex-start;

与主轴终点对齐

justify-content: flex-end;

主轴中心对齐

justify-content: center;

两端对齐

justify-content: space-between;

环绕对齐

justify-content: space-around;

注意: 在设置对齐方式的时候一定要理解两步操作

• 按照主轴起点对伸缩项进行排版
• 按照指定的对齐方式对齐排版好的伸缩项

---

辅轴对齐

与侧轴起点对齐

align-items: flex-start;

与侧轴终点对齐

align-items: flex-end;

与侧轴中心对齐

align-items: center;

基线对齐

让所有伸缩项中的基线在一条直线上对齐

align-items: baseline;

拉伸对齐 / 等高对齐

让所有的伸缩项的高度变为侧轴的高度

ul {
   
	width: 400px;
	height: 400px;
	border: 1px solid #000;
	margin: 100px auto;
	font-size: 30px;
	line-height: 100px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	display: flex