前言
Flexbox 是一种常用于布局的 CSS 属性，它可以让网页的元素自适应屏幕大小、自由排列，并且支持响应式布局。在这个布局模型中，我们需要了解两个概念： main axis 主轴和 cross axis 交叉轴。这两个轴直接影响元素的对齐方式和布局方向。本文将详细介绍不同的属性和值如何影响 main axis 和 cross axis 的变化。
Flexbox 模型
在采用 Flexbox 模型的容器中，可以通过设置 display: flex 或 display: inline-flex; 来定义主轴。默认情况下，主轴方向是从左到右。而 cross axis 与主轴相垂直，其方向会根据主轴的变化而变化。下面是一个示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ------------ ------- ---------------- ------------- - ---------- --- - ------ ----- ------- ----- -
<div class="container"> <div>1</div> <div>2</div> <div>3</div> </div>
这段代码中，我们定义了一个包含三个 div 元素的容器，它们的大小都为 50px x 50px。我们给容器设置了以下属性：
- display: flex; 表示容器采用 Flexbox 布局模型。
- flex-direction: row; 表示主轴方向为水平方向，从左到右排列。
- align-items: center; 表示子元素在交叉轴上居中对齐。
- justify-content: space-around; 表示子元素在主轴上的排列方式为均匀分布，两侧会空出一定的空间。
最后的效果如下图所示：
主轴属性
以下是一些常用的主轴属性及其值：
- flex-direction: row; （默认值）水平方向从左到右排列。
- flex-direction: row-reverse; 水平方向从右到左排列。
- flex-direction: column; 垂直方向从上到下排列。
- flex-direction: column-reverse; 垂直方向从下到上排列。
- 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: stretch; （默认值）子元素会被拉伸以适应交叉轴的大小。
- align-items: baseline; 子元素在其基线上对齐。
- align-content: stretch; （默认值）当容器中的子元素总高度小于容器高度时，子元素会被拉伸以适应容器的大小。
- align-content: flex-start; 子元素在交叉轴起始位置对齐。
- align-content: flex-end; 子元素在交叉轴结束位置对齐。
- align-content: center; 子元素在交叉轴居中对齐。
- align-content: space-between; 子元素在交叉轴上均匀分布，两端无空格。
- align-content: space-around; 子元素在交叉轴上均匀分布，两侧会自动留出空格。
总结
本文主要介绍了 CSS Flexbox 中的 main axis 和 cross axis 的属性和值，以及它们对布局的影响。在实际开发中，我们需要灵活使用这些属性和值，以满足各种不同的需求。最后，我们在示例代码中演示了如何运用这些属性来实现主轴和交叉轴的不同效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652e1a147d4982a6ebf291c5