Flexbox 是一种弹性盒子布局模型，它使得我们可以更轻松地控制 HTML 元素的大小、位置和顺序。使用 Flexbox 布局还可以避免一些传统布局方式无法实现的问题。在本文中，我们将会讲解 Flexbox 布局的一些核心特性。
Flex 容器与 Flex 项
在使用 Flexbox 布局时，我们需要将需要布局的元素的父元素设为 Flex 容器，并且在其上添加 display: flex 属性：
.parent {
display: flex;
}有了 Flex 容器之后，里面所有的元素都会根据 Flexbox 的规则进行排列。Flex 容器里的每个元素被称为 Flex 项，它们会按照一定的规则排列到容器中。
Flex 方向
Flexbox 布局提供了四个方向：
row：水平从左到右row-reverse：水平从右到左column：垂直从上到下column-reverse：垂直从下到上
可以通过在 .parent 中添加 flex-direction 属性来实现这些布局方向：
.parent {
display: flex;
flex-direction: row;
}Flex 主轴与侧轴
在 Flexbox 布局中，主要的排列方向被称为主轴，与主轴垂直的方向被称为侧轴。主轴由 flex-direction 属性决定，侧轴由主轴的方向来决定。
例如，若主轴方向为 row，则侧轴为 column。
Flex 项排列方式
在 Flexbox 布局中，有三种排列方式：flex-start，center 和 flex-end。
flex-start：从主轴的起始位置开始排列。center：在主轴上居中排列。flex-end：从主轴的末尾位置排列。
这些排列方式可以通过 justify-content 属性来决定：
.parent {
display: flex;
justify-content: flex-start;
}Flex 项间间隔
我们可以使用 gap 或者 margin 属性来为 Flex 项添加间隔，两者的区别在于 margin 会在 Flex 项之外留下空白，而 gap 只会在 Flex 项之间添加空隙。
.parent {
display: flex;
gap: 20px;
/* 或者 */
/* margin: 10px; */
}Flex 项对齐方式
在 Flexbox 布局中，有三种对齐方式：flex-start，center 和 flex-end。
flex-start：将元素沿侧轴的起始位置对齐。center：在侧轴上居中排列。flex-end：将元素沿侧轴的末尾位置对齐。
这些对齐方式可以通过 align-items 属性来决定：
.parent {
display: flex;
flex-direction: column;
align-items: center;
}Flex 布局实例
下面是一些实际的布局示例。这些示例可以更好地帮助大家理解 Flexbox 布局的特点。
水平居中与垂直居中
<div class="container">
<div class="item">
My Flexbox Item
</div>
</div>-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ ----------------- -------- - ----- - ------ ------ ------- ------ ----------------- ----- ------ ----- ----------- ------- ------------ ------ -
Flex 布局等距排列
<div class="container"> <div class="item">Flex Item 1</div> <div class="item">Flex Item 2</div> <div class="item">Flex Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ------- ------ ----------------- -------- - ----- - ------ ------ ------- ----- ----------------- ----- ------ ----- ----------- ------- ------------ ----- -
Flex 布局列表
<div class="container"> <div class="item">Flex Item 1</div> <div class="item">Flex Item 2</div> <div class="item">Flex Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ------- ------ ----------------- -------- - ----- - ------ ----- ------- ----- ----------------- ----- ------ ----- ----------- ------- ------------ ----- -
总结
Flexbox 布局提供了一种非常灵活的布局方式，大大简化了我们处理 HTML 元素的排列问题。希望本文能够帮助大家更好地理解和应用 Flexbox 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f94a57f6b2d6eab30d9073