CSS Flexbox 是一种最常用的创建网格布局的方法之一。使用它可以简单、快捷地创造出复杂的网格效果。这篇文章将带你从零开始入门，并向你展示如何使用 Flexbox。
什么是 CSS Flexbox？
CSS Flexbox 是 CSS 的一种强大布局方式，全名为 Flexible Box Layout Module。它可以让我们更加轻松地创建可伸缩布局，而不必用到許多浮动和定位。
Flexbox 的主要概念
在使用 Flexbox 之前，先要了解一些基本概念。其中的主要概念有以下几个：
容器
在 Flexbox 中，容器是指父元素，包含着一组子元素。
主轴
在 Flexbox 中，主轴是沿着 Flexbox 容器的主方向，而不会自动换行的轴。
项目
在 Flexbox 中，项目是指子元素，它们组成了容器内部的网格布局。Flexbox 没有特定的标准大小或形状，所以项目可以是各种各样的元素。
交叉轴
在 Flexbox 中，交叉轴是与主轴垂直的轴，它会随着容器的内容自动调整。
Flexbox 的使用
现在，进入到实际的操作中。下面，我们将用示例代码来展示如何在 CSS 中使用 Flexbox。
创建一个简单的 Flexbox 容器
首先，我们需要一个简单的 HTML 代码，并为它定义一组样式。
HTML 代码：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div>
CSS 代码：
.container {
display: flex;
}这样就成功创建了一个空的 Flexbox 容器。在 Flexbox 中，所有的项目默认将纵向排列。也就是说，每一个项目都将以一个单独的块级元素的形式出现。此时，项目的宽度是完全相同的，可以通过设置主轴方向的颜色将它们区分开来。
沿主轴方向对齐项目
现在，让我们在主轴方向上对齐项目。通过设置 justify-content 属性即可。
CSS 代码：
.container {
display: flex;
justify-content: center;
}这样项目就可以在主轴方向上居中对齐了。
沿交叉轴方向对齐项目
同样地，我们也可以在交叉轴方向上对齐项目，只需要设置 align-items 属性即可。
CSS 代码：
.container {
display: flex;
justify-content: center; /* 主轴方向居中对齐 */
align-items: center; /* 交叉轴方向居中对齐 */
}定义项目在容器中的大小
设定项目在容器中的大小非常简单，只需要指定项目的 flex 属性即可。flex 是一个数字，用于定义项目的高度和宽度，以及与它们的配合比例。如果 flex 属性的值相同，则它们将以等比例分配容器的可用空间。
HTML 代码：
<div class="container"> <div class="item" style="flex: 1;">item 1</div> <div class="item" style="flex: 2;">item 2</div> <div class="item" style="flex: 1;">item 3</div> </div>
这样，所有的项目都可以保持等比例地分配容器的可用空间。
垂直显示多行项目
最后，我们来演示一下如何使用 Flexbox 垂直显示多行项目。这里，我们只需要设置 flex-wrap 属性即可。
CSS 代码：
.container {
display: flex;
flex-wrap: wrap;
}这样，项目就可以在容器中垂直地显示出来。
总结
CSS Flexbox 是一种强大的布局方式，可以让我们更加轻松地创建可伸缩的网格布局。它的基本概念包括容器、主轴、项目和交叉轴。在使用 Flexbox 时，需要指定主轴和交叉轴方向，并通过设置相应的属性实现对项目在容器中的大小和对齐方式的控制。
通过本篇文章，希望能帮助各位新手更加理解 Flexbox，并能在自己的项目中更加灵活地应用此种布局方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b305a048841e9894f37092