前言
在网页设计中，布局是一个非常重要的部分。在过去，我们通常使用 CSS float 属性来实现布局。但是，这种方法有时会变得很麻烦。特别是在处理响应式布局时，需要针对不同的屏幕尺寸编写不同的 CSS 代码。这时，CSS Flexbox 布局就显得非常有用了。本文将介绍 CSS Flexbox 布局的基础知识和 7 个实际应用实例。
什么是 CSS Flexbox 布局？
CSS Flexbox 布局是一种新的布局方式，它可以让元素在容器内自由地伸缩和对齐。Flexbox 布局的核心概念是容器和内容。容器是一个包含内容的元素，而内容则是容器内的元素。在 Flexbox 布局中，我们可以通过设置容器的属性来控制内容的布局。
Flexbox 布局的基本属性
在 Flexbox 布局中，有一些基本属性可以用来控制容器和内容的布局。以下是一些常用的属性：
display
这个属性用来定义容器的类型。在 Flexbox 布局中，容器的类型应该设置为 flex。
.container {
display: flex;
}flex-direction
这个属性用来定义容器内元素的排列方向。可以设置为 row（水平方向），column（垂直方向），row-reverse（水平方向反向）和 column-reverse（垂直方向反向）。
.container {
flex-direction: row;
}justify-content
这个属性用来定义容器内元素在主轴上的对齐方式。可以设置为 flex-start（左对齐），flex-end（右对齐），center（居中对齐），space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目两侧的间隔相等）。
.container {
justify-content: center;
}align-items
这个属性用来定义容器内元素在交叉轴上的对齐方式。可以设置为 flex-start（顶部对齐），flex-end（底部对齐），center（居中对齐），baseline（基线对齐）和 stretch（拉伸对齐）。
.container {
align-items: center;
}flex-wrap
这个属性用来定义容器内元素是否换行。可以设置为 nowrap（不换行）和 wrap（换行）。
.container {
flex-wrap: wrap;
}align-content
这个属性用来定义多行元素在交叉轴上的对齐方式。可以设置为 flex-start（顶部对齐），flex-end（底部对齐），center（居中对齐），space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目两侧的间隔相等）。
.container {
align-content: center;
}7 个实际应用实例
1. 垂直居中
在传统的布局方式中，垂直居中是一件很困难的事情。但是，在 Flexbox 布局中，我们可以很容易地实现垂直居中。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ---------------- ------- ------- ------ - ----- - ------ ------ ------- ------ ----------------- ----- -
2. 等分布局
在传统的布局方式中，等分布局也是一件很困难的事情。但是，在 Flexbox 布局中，我们可以很容易地实现等分布局。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------- ------ - ----- - ----- -- ----------------- ----- -
3. 水平居中
在传统的布局方式中，水平居中也是一件很困难的事情。但是，在 Flexbox 布局中，我们可以很容易地实现水平居中。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ---------------- ------- ------- ------ - ----- - ------ ------ ------- ------ ----------------- ----- -
4. 两端对齐
在传统的布局方式中，两端对齐也是一件很困难的事情。但是，在 Flexbox 布局中，我们可以很容易地实现两端对齐。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------- ------ - ----- - ------ ------ ------- ------ ----------------- ----- -
5. 固定宽度和自适应宽度
在传统的布局方式中，固定宽度和自适应宽度也是一件很困难的事情。但是，在 Flexbox 布局中，我们可以很容易地实现固定宽度和自适应宽度。
<div class="container"> <div class="item item-fixed">1</div> <div class="item item-auto">2</div> <div class="item item-auto">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - ----- - ------- ------ ----------------- ----- - ----------- - ------ ------ - ---------- - ----- -- -
6. 列表布局
在传统的布局方式中，列表布局也是一件很困难的事情。但是，在 Flexbox 布局中，我们可以很容易地实现列表布局。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ------- ------ - ----- - ------- ------ ----------------- ----- -
7. 左右布局
在传统的布局方式中，左右布局也是一件很困难的事情。但是，在 Flexbox 布局中，我们可以很容易地实现左右布局。
<div class="container"> <div class="item item-left">1</div> <div class="item item-right">2</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - ----- - ------- ------ ----------------- ----- - ---------- - ------ ------ - ----------- - ----- -- -
结论
CSS Flexbox 布局是一种非常有用的布局方式。它可以让我们更轻松地实现复杂的布局，并且可以适应不同的屏幕尺寸。希望本文能够帮助你更好地理解 CSS Flexbox 布局的基础知识和应用实例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d11c3e1dcc5c0fa387c79