CSS Flexbox 是一个强大的布局技术，可以使我们以简单而灵活的方式来设计和排版页面。本文是一个完整的指南，旨在帮助前端开发人员更好地理解 CSS Flexbox，并深入了解其基本概念、属性和用法，并提供一些实用的示例代码。
什么是 CSS Flexbox
CSS Flexbox 是一个用于布局的 CSS 模块，它提供了一种可响应的方式来调整和排列元素。它允许我们在一个容器中创建灵活的布局，并使用灵活的属性来控制元素的位置、大小和顺序。
Flexbox 最初是为那些需要进行垂直和水平居中的元素而设计的，但现在已成为一种主要的布局方式。
Flexbox 基础概念
容器和项目
首先，我们需要理解 Flexbox 的两个主要概念：容器和项目。
容器是指一个 DOM 元素，它包含了要布局的子元素，而这些子元素称为项目。
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
在上面的示例代码中，container 是 Flexbox 的容器，而 item 是容器中的项目。
主轴和交叉轴
在 Flexbox 中，我们还会用到两个主要的轴：主轴和交叉轴。
- 主轴：是 Flexbox 布局中最重要的一个轴。它是容器的主要方向，可以是水平或垂直的。默认情况下，主轴是水平的。
- 交叉轴：是与主轴垂直的轴。默认情况下，交叉轴是垂直的。
Flexbox 属性
有很多的 Flexbox 属性，但在本指南中，我们介绍并讲解最常用的属性。
display: 定义一个容器，使其成为一个 Flexbox 容器。必须将其设置为flex或inline-flex。默认情况下，该属性为normal。flex-direction: 定义主轴的方向，值可以是row、column、row-reverse或column-reverse。默认为row。flex-wrap: 定义如何换行，值可以是nowrap、wrap或wrap-reverse。默认为nowrap。justify-content: 定义主轴上的对齐方式，值可以是flex-start、flex-end、center、space-between、space-around或space-evenly。默认为flex-start。align-items: 定义交叉轴上的对齐方式，值可以是flex-start、flex-end、center、baseline或stretch。默认为stretch。align-content: 定义多条轴线之间的对齐方式，当容器内有多行项目时有效。取值与justify-content类似，但只有flex-start, flex-end, center, space-between,space-around,stretch六个值可以使用。默认为stretch。flex-grow: 定义项目放大比例，默认为0，即不放大。flex-shrink: 定义项目缩小比例，默认为1。flex-basis: 定义项目的基础大小。默认情况下，为项目本身的大小。align-self: 允许单个项目与其他项目不一样地在交叉轴上对齐。
Flexbox 实例
水平居中
让我们从经典的布局开始——水平居中，代码如下：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.container {
display: flex;
justify-content: center;
align-items: center;
}在这个示例中，我们使用 justify-content: center 和 align-items: center 来将项目居中。
垂直居中
接下来，来实现一下垂直居中的布局：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}这个示例中，我们使用了 flex-direction: column 来让容器的主轴变为垂直方向。
等分布局
我们也可以很容易地实现等分布局，使每个项目在主轴上平均分配空间。
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.container {
display: flex;
justify-content: space-between;
}在这个示例中，我们使用 justify-content: space-between 来让每个项目在主轴上平均分配空间。
瀑布流布局
我们也可以用 Flexbox 来实现瀑布流布局，这是一种经典的网格布局。
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- -------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----- - - -------- - ------ ------- ---- ----------------- ------ ------ ------ ----------- ------- ------------ ----- -
在这个示例中，我们将容器元素的 flex-wrap 设置为 wrap，然后将每个项目的 flex 属性设置为 flex: 1 0 calc(25% - 10px)，其中 calc(25% - 10px) 是项目的宽度。我们还在项目上添加了一些样式，让它们看起来更加美观。
总结
CSS Flexbox 是一个非常有用的布局技术，可以让我们更轻松地设计和排版网站。在本指南中，我们介绍了 Flexbox 的基本概念和常用属性，以及一些常见的布局示例。我们希望这篇文章可以帮助你更好地理解 CSS Flexbox 并在你的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465ffd2968c7c53b06abe73