CSS3 Flexbox 是一种 CSS 布局模式，它可以帮助开发者轻松地创建灵活的、可适应的界面布局。Flexbox 可以让开发者更好地控制元素在容器中的位置、大小和间距，同时还可以自动调整元素的位置和大小，以适应不同的屏幕尺寸和设备类型。
什么是 Flexbox？
Flexbox 是一种基于容器和项目的布局方式。容器是指包含 Flexbox 项目的父元素，而项目则是容器中的子元素。Flexbox 布局方式可以帮助开发者在容器中更好地控制项目的位置、大小和间距，同时还可以自动调整项目的位置和大小，以适应不同的屏幕尺寸和设备类型。
Flexbox 的特点
Flexbox 布局方式具有以下特点：
灵活性：Flexbox 布局方式可以让开发者更好地控制项目在容器中的位置、大小和间距，同时还可以自动调整项目的位置和大小，以适应不同的屏幕尺寸和设备类型。
方便性：Flexbox 布局方式提供了简单的语法和属性，可以让开发者轻松地创建灵活的、可适应的界面布局。
兼容性：Flexbox 布局方式在现代浏览器中都得到了很好的支持，可以兼容多种设备和浏览器类型。
如何使用 Flexbox？
使用 Flexbox 布局方式非常简单，只需要在容器元素上设置 display: flex; 属性即可。下面是一个简单的示例：
<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;
}在上面的示例中，我们将 display 属性设置为 flex，这样容器元素就成为了一个 Flexbox 容器。在容器中添加了三个项目，它们会自动排列在一行中，且宽度会自适应。
Flexbox 的常用属性
Flexbox 布局方式提供了多种属性，可以帮助开发者更好地控制项目在容器中的位置、大小和间距。下面是一些常用的属性：
flex-direction：指定项目在容器中的排列方向。可以设置为row（默认值，水平方向排列）、column（垂直方向排列）、row-reverse（水平方向反向排列）和column-reverse（垂直方向反向排列）。
.container {
display: flex;
flex-direction: row-reverse;
}justify-content：指定项目在容器中的水平对齐方式。可以设置为flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间距相等）和space-around（每个项目周围的间距相等）。
.container {
display: flex;
justify-content: space-between;
}align-items：指定项目在容器中的垂直对齐方式。可以设置为flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐，项目的基线会对齐）和stretch（拉伸对齐，所有项目会被拉伸到容器的同一高度）。
.container {
display: flex;
align-items: center;
}flex-wrap：指定项目是否可以换行。可以设置为nowrap（默认值，不换行）、wrap（换行，第一行在上面）和wrap-reverse（换行，第一行在下面）。
.container {
display: flex;
flex-wrap: wrap;
}flex-grow：指定项目在容器中的放大比例。可以设置为一个数字，表示项目的放大比例。默认值为0，表示不放大。
.item {
flex-grow: 1;
}示例代码
下面是一个完整的 Flexbox 示例代码，可以帮助开发者更好地理解 Flexbox 布局方式的使用方法：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- ------- ------------ ------- ---------- ----- - ----- - ---------- -- ------- ----- -------- ----- ----------------- ----- ----------- ------- -
在上面的示例中，我们创建了一个 Flexbox 容器，并在容器中添加了五个项目。我们将容器的排列方向设置为水平方向，水平对齐方式设置为居中，垂直对齐方式设置为居中，同时还设置了换行。我们还设置了项目的放大比例、边距、内边距、背景颜色和文本对齐方式。最终的效果如下图所示：
总结
CSS3 Flexbox 是一种非常实用的布局方式，可以帮助开发者轻松地创建灵活的、可适应的界面布局。在实际开发中，我们可以根据不同的需求和场景，灵活地使用 Flexbox 布局方式，并结合其他 CSS 技术来创建更加复杂的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663dd5bbd3423812e4bf40a1