介绍
Flexbox 是一种为 web 页面布局提供更高级、更现代化的解决方案的新型布局方式。它可以让开发人员更轻松地实现复杂的布局效果，而不需要使用传统的方法，如浮动、定位和 table 布局。
在本文中，我们将探讨如何使用 Flexbox 来创建简单的布局。我们会从基础知识入手，然后逐步深入，直到我们能够使用 Flexbox 来创建真正复杂的布局。
开始
Flexbox 布局需要一个容器和其中的多个子元素。我们来创建一个最简单的布局实例，包含一个
<div class="container"> <div>子元素 1</div> <div>子元素 2</div> <div>子元素 3</div> </div>
现在，将以下 CSS 代码添加到我们的样式表中，以便开始使用 Flexbox：
.container {
display: flex;
}这意味着我们将容器元素的 display 属性设置为 flex，容器内的所有子元素将自动变成 Flexbox 项目。
Flexbox 布局的基础
现在，我们已经创建了一个简单的 Flexbox 布局，我们可以开始学习一些基础知识。
主轴和交叉轴
Flexbox 的主轴（main axis）是沿着 Flexbox 容器的 flex-direction 设置的方向延伸的轴线。默认的方向是 row，表示 Flexbox 项目会按照横向排列。如果我们将 Flexbox 容器的 flex-direction 设置为 column，那么我们将创建一个纵向的 Flexbox 布局。
主轴的起点被称为 Flexbox 容器的「起点（start）」，终点被称为「终点（end）」。
Flexbox 的交叉轴（cross axis）与主轴垂直，并在主轴上扩展，从而创建两个轴线；它是 Flexbox 容器的次要轴。默认情况下，交叉轴在垂直方向上延伸。
交叉轴的起点被称为 Flexbox 容器的「交叉起点（cross-start）」，终点被称为「交叉终点（cross-end）」。
以下示例展示了 Flexbox 布局中的主轴和交叉轴的概念以及它们的相互作用：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}项目定位
在 Flexbox 布局中，我们可以使用多个属性来定位项目：flex-basis、flex-grow 和 flex-shrink。
flex-basis 属性指定项目的初始大小。默认值是 auto，其大小由项目的实际宽度或高度决定。
flex-grow 属性可以指定项目在需要更多空间时应该如何放大。如果我们将一个项目的 flex-grow 属性设置为 1，则该项目将与其他具有相同属性的项目平均分配可用的空间。
flex-shrink 属性可以指定项目在可用空间不足时应缩小的程度。如果我们将一个项目的 flex-shrink 设置为 1，则该项目将按比例缩小，以适应可用空间。
以下示例演示了如何使用这些属性：
-- -------------------- ---- ------- ---------- - -------- ----- - ---------- --- - ----------- ------ ------------ -- ---------- -- -
使用 Flexbox 创建布局
正如我们在前面看到的那样，Flexbox 可以非常方便地创建布局，而无需使用传统的方法。我们现在将看到 Flexbox 布局的更高级例子。
水平居中
以下示例演示了如何使用 Flexbox 布局将文本垂直且水平居中：
.container {
display: flex;
justify-content: center;
align-items: center;
}水平和垂直居中
以下示例演示了如何在 Flexbox 布局中同时水平和垂直居中一个元素：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ---------- --- - ------ ------ ------- ------ -
等宽子项
以下示例演示如何使用 Flexbox 等宽分配容器内的所有项目：
.container {
display: flex;
}
.container div {
flex: 1;
}结论
Flexbox 布局是一种非常有用的方式，可以帮助我们轻松地创建复杂的布局效果。无论您是使用传统的方法还是试图探索最新的技术，都应该掌握它的基础知识。希望本文对您有所帮助，您也可以在自己的项目中尝试使用 Flexbox 来改善自己的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f26ab7a44b36ee5765e0a3