CSS Flexbox 是一种布局模式，主要用于创建灵活的、响应式的布局，它可以在容器中管理子元素的位置、大小和顺序。为了使用它，我们需要了解一些特殊的术语和概念，例如主轴和交叉轴。
本篇文章将详细讲解 CSS Flexbox 的主轴和交叉轴，并提供示例代码，帮助读者更深入地了解这一技术，以便能够在自己的前端项目中有效地应用它。
主轴
在 CSS Flexbox 中，主轴是与 Flex 容器方向相同的轴，它沿着 Flex 容器的主轴方向排列子元素，例如 Flex 容器是水平方向的，则主轴是水平方向。
在 CSS Flexbox 中，主轴有两个重要的属性：justify-content 和 align-items。这两个属性分别用于控制主轴方向上子元素的对齐方式和分布方式。
justify-content
justify-content 属性用于控制主轴方向上子元素的分布方式。它有以下几个取值：
flex-start：将子元素放置在主轴的起始端。flex-end：将子元素放置在主轴的结束端。center：将子元素居中对齐。space-between：将子元素均匀分布在主轴上，两端不留空白。space-around：将子元素均匀分布在主轴上，两端留有相同大小的空白空间。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- - ---------- - ------ ------ ------- ------ ----------------- ---- -
上述代码的效果是：将 Flex 容器中的子元素居中对齐。
align-items
align-items 属性用于控制主轴方向垂直的子元素的对齐方式。它有以下几个取值：
flex-start：将子元素放置在交叉轴的起始端。flex-end：将子元素放置在交叉轴的结束端。center：将子元素在交叉轴方向上居中对齐。baseline：将子元素的基线与 Flex 容器的基线对齐。stretch：在交叉轴上拉伸每一个子元素，以适配 Flex 容器的高度。
-- -------------------- ---- ------- --------------- - -------- ----- ------------ ------- - ---------- - ------ ------ ------- ------ ----------------- ---- -
上述代码的效果是：将 Flex 容器中的子元素垂直居中对齐。
交叉轴
在 CSS Flexbox 中，交叉轴是与主轴方向垂直的轴。它沿着 Flex 容器的交叉轴方向排列子元素，例如 Flex 容器是水平方向的，则交叉轴是垂直方向。
在 CSS Flexbox 中，交叉轴有两个重要的属性：justify-items 和 align-content。这两个属性分别用于控制交叉轴方向上子元素的对齐方式和分布方式。
justify-items
justify-items 属性用于控制交叉轴方向上子元素的对齐方式。它有以下几个取值：
flex-start：将子元素放置在交叉轴的起始端。flex-end：将子元素放置在交叉轴的结束端。center：将子元素在交叉轴方向上居中对齐。baseline：将子元素的基线与 Flex 容器的基线对齐。stretch：将子元素在交叉轴方向上拉伸，以适应 Flex 容器的高度。
-- -------------------- ---- ------- --------------- - -------- ----- -------------- ------- - ---------- - ------ ------ ------- ------ ----------------- ---- -
上述代码的效果是：将 Flex 容器中的子元素在交叉轴方向上居中对齐。
align-content
align-content 属性用于控制多行子元素的分布方式。它有以下几个取值：
flex-start：将多行子元素放置在交叉轴的起始端。flex-end：将多行子元素放置在交叉轴的结束端。center：将多行子元素在交叉轴方向上居中对齐。space-between：将多行子元素均匀分布在交叉轴上，两端不留空白。space-around：将多行子元素均匀分布在交叉轴上，两端留有相同大小的空白空间。stretch：在交叉轴上拉伸每一个子元素，以适配 Flex 容器的高度。
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- -------------- ------- - ---------- - ------ ------ ------- ------ ----------------- ---- ------- ----- -
上述代码的效果是：将 Flex 容器中的多行子元素在交叉轴方向上居中对齐，并且子元素可以折行换行。
总结
CSS Flexbox 是一种高效、灵活的布局模式，它可以帮助我们轻松地创建响应式布局。了解主轴和交叉轴的概念及其相关属性是应用 CSS Flexbox 的重要前提。通过本文的讲解和示例代码，相信读者已经可以理解并掌握 CSS Flexbox 的主轴和交叉轴的概念及应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca39135ad90b6d041a1f4f