前言
在 CSS 布局中，Flexbox 是一种非常实用的布局方式，它提供了一种简单而强大的方法来对齐和排列元素。Flexbox 的主要目的是使容器中元素的布局更加自适应和动态，可在各种屏幕大小、设备和视口尺寸下得到最佳的效果。
在 Flexbox 中，有两个主要的方向：主轴和交叉轴。主轴定义了元素沿着容器的流动方向，而交叉轴则是指与主轴垂直的轴线。
本文将重点介绍 CSS Flexbox 中的 Cross Axis，包括它的定义、用途以及如何正确使用它。希望能对初学者和有经验的开发人员提供一些指导。
什么是 Cross Axis？
在 Flexbox 布局中，Cross Axis 是侧对垂直于主轴方向的轴线。它与主轴垂直，是一个水平或垂直的线。在默认的情况下，交叉轴的方向是与主轴垂直的方向。
下面是一个示例，展示了交叉轴和主轴之间的差异：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- -- -- -- ------- ------ ------ ----- ----------------- -------- - ----- - ------ ------ ------- ----- ----------------- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------- ----- -
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
在上面的示例中，我们定义了一个 Flexbox 容器，并使用 justify-content: center 和 align-items: center 把它们居中对齐。
主轴是从左到右的水平方向，而交叉轴则是从上到下的垂直方向。这意味着 align-items: center 在交叉轴方向上不会改变元素的位置，而 justify-content: center 在主轴方向上使它们居中对齐。
如何使用 Cross Axis？
掌握如何使用 Cross Axis 是非常重要的。毕竟，它是让您的 Flexbox 布局看起来更专业和更漂亮的关键。
在本节中，我们将学习如何使用 Flexbox 中的 Cross Axis 属性对元素进行排列。
定义 Cross Axis
在默认情况下，交叉轴的方向是垂直于主轴的。这意味着如果主轴是水平的，则交叉轴将是垂直的，并且反之亦然。然而，您可以更改交叉轴的方向，使它成为水平或垂直方向。
要更改交叉轴的方向，请使用 flex-direction 属性。该属性指定了 Flexbox 容器内的主轴方向。
例如，要使交叉轴变为水平方向，请将 flex-direction 设置为 row。如果你希望交叉轴方向上的元素基线对齐，可以使用 align-content: baseline。这在排列文本时非常有用。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- -------------- --------- ------- ------ ------ ----- ----------------- -------- - ----- - ------ ------ ------- ----- ----------------- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------- ----- -
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
在上面的例子中，我们将容器的 flex-direction 属性设置为 row，并在主轴上使用 justify-content: center 和交叉轴上使用 align-items: center 将元素居中对齐。为了基线对齐，我们还在容器上使用了 align-content: baseline。
与主轴方向相同，我们也可以沿着交叉轴方向反转元素的顺序，使用 flex-flow 属性。
控制 Cross Axis 的对齐方式
在 CSS Flexbox 布局中，您可以使用多个属性来控制元素在交叉轴方向上的对齐方式。下文我们详细介绍这些属性：
align-self
如果您想使单个项在交叉轴上有不同的对齐方式，您可以使用 align-self 属性。该属性具有以下值：
auto：自适应交叉轴上的对齐方式。flex-start：在交叉轴的起始位置上对齐元素。flex-end：在交叉轴的结尾位置上对齐元素。center：在交叉轴的中心对齐元素。baseline：基于项目的基线对齐元素。stretch：拉伸元素以适应容器的高度。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- ------- ------ ------ ----- ----------------- -------- - ----- - ------ ------ ------- ----- ----------------- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------- ----- - ----- - ----------- --------- -
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item-last">5</div> </div>
在上面的示例中，我们使用 align-self: flex-end 属性将最后一个元素固定在容器的底部，而其他的元素保持居中对齐。
align-content
如果您的 Flexbox 容器中有多个行或列，您可以使用 align-content 属性控制它们在交叉轴方向上的对齐方式。
该属性具有以下值：
flex-start：沿交叉轴的起点对齐所有行或项目的顶端。flex-end：沿交叉轴的结尾对齐所有行或项目的末端。center：在沿交叉轴的中心将所有行或项目垂直居中。space-between：在行或项目之间均匀分布空间。第一行的顶部和最后一行的底部与边界对齐。space-around：在行或项目周围均匀分布空间。每行的顶部和底部都有额外的空间。stretch：拉伸每个项目以填充容器的高度。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- -------------- ------- ------- ------ ------ ----- ----------------- -------- - ---- - -------- ----- ---------------- ------- ------------ ------- ------ ----- - ------ - ------- ----- ----------------- ----- ------ ----- ---------- ----- -------- ----- ------ ----- - ------ - ------- ----- ----------------- ----- ------ ----- ---------- ----- -------- ----- ------ ----- - ------ - ------- ------ ----------------- ----- ------ ----- ---------- ----- -------- ----- ------ ----- - ------ - ------- ------ ----------------- ----- ------ ----- ---------- ----- -------- ----- ------ ----- -
<div class="container"> <div class="row row-1">1</div> <div class="row row-2">2</div> <div class="row row-3">3</div> <div class="row row-4">4</div> </div>
在上面的示例中，我们为了展示 align-content 效果在 Flexbox 容器中定义了多个行，不过在实际应用中可能不一定是这样。然后使用 align-content: center 将行垂直居中。
总结
Cross Axis 是 CSS Flexbox 中的一个重要概念。了解如何正确使用 Cross Axis 可以让您的 Flexbox 布局更加专业和美观。在本文中，我们深入介绍了如何使用 CSS Flexbox 的 Cross Axis 属性，使您可以掌握如何更好地控制项目在交叉轴方向上的排列方式。愿您在使用 CSS Flexbox 时更加成功！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6593ec0feb4cecbf2d889ac8