Flexbox 布局是一种用于在容器中排列元素的 CSS 技术。它可以使网站布局更灵活和响应式，管理元素的大小和位置。
Flex 容器和 Flex 元素
Flexbox 布局包含 2 个主要概念：Flex 容器和 Flex 元素。Flex 容器用于包含 Flex 元素，并设置了一些规则以控制元素的排列方式。Flex 元素是 Flex 容器中的子元素，在容器中排列。
要创建一个 Flex 容器，需要在容器的样式中设置 display: flex;，如下所示：
.container {
display: flex;
}容器中包含的子元素即为 Flex 元素，这些元素会根据容器的规则进行排列。设置 Flex 元素的样式时，需要使用 flex-* 属性来控制元素的大小和位置。
Flex 容器的主轴和交叉轴
Flexbox 布局中的排列是基于主轴和交叉轴的。主轴是 Flex 容器中的横向轴，交叉轴是相对于主轴的垂直轴。Flexbox 布局默认是沿着主轴排列元素。
在样式中设置主轴的方向和交叉轴的方向，可以使用 flex-direction 属性。默认情况下，flex-direction 的值为 row，表示主轴是水平方向。可以将其设置为 column，表示主轴是垂直方向。
.container {
display: flex;
flex-direction: column;
}Flex 元素的排列方式
Flexbox 布局可以控制 Flex 元素的排列方式，包括元素的位置、宽度和高度等。这些设置可以使用 justify-content 和 align-items 属性。
justify-content 用于设置 Flex 元素在主轴上的对齐方式，它有以下几个取值：
flex-start：元素靠近主轴起点对齐flex-end：元素靠近主轴终点对齐center：元素在主轴上居中对齐space-between：元素平均分布在主轴上，首尾元素分别靠近起点和终点space-around：元素平均分布在主轴上，每个元素周围分布相等的空间
.container {
display: flex;
justify-content: center;
}align-items 用于设置 Flex 元素在交叉轴上的对齐方式，它有以下几个取值：
flex-start：元素靠近交叉轴起点对齐flex-end：元素靠近交叉轴终点对齐center：元素在交叉轴上居中对齐stretch：元素沿着交叉轴拉伸到容器的高度或宽度baseline：元素在基线上对齐
.container {
display: flex;
align-items: center;
}Flex 元素的排序
Flexbox 布局中，可以使用 order 属性来定义 Flex 元素的顺序。数值越小的元素排在越前面。
-- -------------------- ---- ------- ----------------- - ------ -- - ------------------ - ------ -- - ---------------- - ------ -- -
总结
Flexbox 布局是一种强大的 CSS 技术，可以轻松灵活地排列网页中的元素。本文介绍了 Flex 容器和 Flex 元素的基本概念和风格设置，并提供了示例代码。掌握 Flexbox 布局可以使网站布局更加灵活和响应式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6467455e968c7c53b07a853f
