弹性布局(Flexbox)是一种用于在容器内分配和对齐项目的一维布局方法。它旨在提供一种更加有效的方式来排列、对齐和分配在容器中的项目,即使它们的大小是未知的或者是动态变化的。弹性布局的规则主要包括以下几个方面:
容器和项目
首先,我们需要明确弹性布局中的两个基本概念:容器和项目。
- 容器:使用 `display: flex;` 或 `display: inline-flex;` 属性声明的元素称为弹性容器。
- 项目:容器的直接子元素会自动成为弹性项目。
主轴和交叉轴
弹性布局中的布局是相对于主轴和交叉轴来进行的。
- 主轴:弹性容器的主轴是弹性项目的主要布局方向。可以是水平方向(默认)或垂直方向。
- 交叉轴:垂直于主轴的轴称为交叉轴。
容器的属性
容器有许多属性可以控制其内部项目的布局方式:
- flex-direction:定义了主轴的方向。
- `row`(默认值):主轴为水平方向,起点在容器的左端。
- `row-reverse`:主轴为水平方向,起点在容器的右端。
- `column`:主轴为垂直方向,起点在容器的顶端。
- `column-reverse`:主轴为垂直方向,起点在容器的底端。
- flex-wrap:定义如果一行不足以放下所有项目,是否换行。
- `nowrap`(默认值):所有项目都在一行显示。
- `wrap`:项目多到一行放不下时,会换行。
- `wrap-reverse`:换行,但是第一行在下面。
- justify-content:定义了项目在主轴上的对齐方式。
- `flex-start`:项目在主轴的起始位置对齐。
- `flex-end`:项目在主轴的结束位置对齐。
- `center`:项目在主轴上居中对齐。
- `space-between`:项目在主轴上均匀分布,两端对齐。
- `space-around`:项目在主轴上均匀分布,每个项目两侧的间隔相等。
- align-items:定义了项目在交叉轴上如何对齐。
- `stretch`(默认值):项目拉伸以填满容器的高度或宽度。
- `flex-start`:项目在交叉轴的起始位置对齐。
- `flex-end`:项目在交叉轴的结束位置对齐。
- `center`:项目在交叉轴上居中对齐。
- `baseline`:项目在交叉轴上按照它们的基线对齐。
- align-content:定义了多行之间的空间分配和对齐方式。
- 当只有一行时,该属性不起作用。
- `flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`stretch`。
项目的属性
项目也有一些属性来控制其在容器中的位置和大小:
- order:定义项目的排列顺序。数值越小,排列越靠前,默认为0。
- flex-grow:定义项目的放大比例,默认为0,即如果有剩余空间,也不放大。
- flex-shrink:定义项目的缩小比例,默认为1,即空间不足时,项目将等比例缩小。
- flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。
- flex:是 `flex-grow`, `flex-shrink` 和 `flex-basis` 的简写,默认值为 `0 1 auto`。
- align-self:允许单个项目有与其他项目不一样的对齐方式,可以覆盖 `align-items` 属性。
弹性布局的这些规则为我们提供了一种强大的布局方式,使得在响应式设计中能够更加灵活地处理页面布局,大大提高了前端开发的效率和页面性能。