Flexbox 是一种强大的 CSS 布局模型，它可以让开发人员更加轻松地控制网页中的布局。在使用 Flexbox 进行布局时，对于项（items）的对齐方式非常重要，因为这些项的位置关系直接影响页面的外观和微互动体验。本文将介绍在 Flexbox 布局下的项行列对齐技巧以及相应的学习和指导意义。
1. 容器属性
Flexbox 布局中，通过设置容器（container）属性来控制项的对齐方式。以下是常用的容器属性：
1.1 justify-content
justify-content 属性可以控制一行中所有项在主轴上的对齐方式。主轴（main axis）定义了项的排序。以下是可用的 justify-content 属性值：
flex-start: 所有项都向左对齐。flex-end: 所有项都向右对齐。center: 所有项都在容器中居中对齐。space-between: 所有项之间均分主轴上的空间。space-around: 所有项均分主轴上的空间，包括两端。
以下是一个 justify-content 属性的示例代码：
---------- - -------- ----- ---------------- ------- -
1.2 align-items
align-items 属性可以控制所有项在侧轴（cross axis）上的对齐方式。侧轴垂直于主轴，对于纵向的布局来说是水平的方向。以下是可用的 align-items 属性值：
flex-start: 所有项都向上对齐。flex-end: 所有项都向下对齐。center: 所有项都在容器中垂直居中对齐。stretch: 所有项在侧轴上拉伸平分容器的高度。
以下是一个 align-items 属性的示例代码：
---------- - -------- ----- ------------ ------- -
1.3 align-content
align-content 属性可以控制当一行容器中的所有项的高度之和小于容器高度时，这些项在侧轴上的对齐方式。align-content 只在 Flexbox 容器的多行项上起作用。以下是可用的 align-content 属性值：
flex-start: 行向上对齐。flex-end: 行向下对齐。center: 行居中对齐。space-between: 行之间均分侧轴上的空间。space-around: 所有行均分侧轴上的空间，包括行首和行尾。stretch: 按比例拉伸行的高度以填满容器。
以下是一个 align-content 属性的示例代码：
---------- - -------- ----- -------------- ------- -
2. 项属性
除了容器属性之外，可以为每个项设置以下属性来控制它们在容器内的位置：
2.1 order
order 属性可以更改项在 Flexbox 容器中的排序。默认情况下，浏览器将按照 HTML 元素的顺序呈现所有项。如果设置了项的 order 属性，则可以将其移到其他位置。order 属性接受整数值，值越低，项将排在越前。
以下是一个 order 属性的示例代码：
----- - ------ -- -
2.2 align-self
align-self 属性是 align-items 属性的替代品，它可以为每个项定义一个不同的侧轴上的对齐方式，而不是在容器级别上定义。align-self 可以接受与 align-items 属性相同的值。
以下是一个 align-self 属性的示例代码：
----- - ----------- ------- -
结论
在 Flexbox 布局下，通过设置容器和项属性，可以实现项的行列对齐。以上是本文对于 Flexbox 布局下的项行列对齐技巧的详细介绍。希望本文对于读者的学习和实践有所指导作用。以下是一个完整的示例代码：
---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- -------------- ------- - ----- - ------ ------ ------- ------ ------- ----- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6705f6f6d91dce0dc8562326