在前端开发中，页面布局是一个必不可少的部分。而在早期的网页布局中，使用的是传统的盒模型布局（css box model），但是这种布局的缺点也显而易见：调整位置相对困难，而且代码也十分冗长。为了弥补这个缺陷，Flexbox 布局应运而生。Flexbox 布局可以让页面的元素更容易地进行定位和排列，同时也使代码更简洁明了。
本文将会详细介绍 Flexbox 布局，并为你提供一些实例代码来帮助你更好地理解和运用。
什么是 Flexbox 布局？
“Flexbox” 是 CSS3 中提供的一种新的布局模型。与传统盒模型布局相比，Flexbox 可以让我们更轻松地控制元素的尺寸、位置和排列方式。
Flexbox 布局中有两种重要的概念：Flex 容器和 Flex 项目。Flex 容器指的是包含 Flex 项目的容器元素，而 Flex 项目则是容器里的一个个子元素。
容器元素的样式设置就是控制 Flex 项目的样式。下面是一些常用的容器样式属性：
- display: flex;：将一个盒子元素变成一个 Flex 容器
- flex-direction: row;：设置主轴方向为水平方向
- flex-direction: column;：设置主轴方向为竖直方向
- justify-content: flex-start;：设置 Flex 项目在主轴上的对齐方式为起点
- justify-content: flex-end;：设置 Flex 项目在主轴上的对齐方式为终点
- justify-content: center;：设置 Flex 项目在主轴上的对齐方式为居中
Flexbox 布局还有其他的容器样式属性，这里只是列举了一些常见的。在实际使用中，你可以按照自己的需要设置。
在实践中学习 Flexbox
接下来，我们来看几个常用的 Flexbox 布局实例。这些实例将帮助你更好地理解 Flexbox，并将其应用到你的项目中。
实例 1：水平居中
为了将一个元素水平居中，我们可以这样设置 Flex 容器样式：
---------- - -------- ----- ---------------- ------- -
这样，所有的 Flex 项目都会被水平居中（因为 justify-content 属性设置为 center）。
实例 2：竖直居中
我们也可以用 Flexbox 布局来实现一个元素的竖直居中。这里，我们需要用到 align-items 属性。注意，这里要把 flex-direction 属性设置为 column，以确保主轴是竖直方向。
---------- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- -
这样就可以同时实现竖直和水平居中了。
实例 3：卡片布局
Flexbox 布局也可以轻松地对卡片进行布局。如下所示，使用 flex-wrap: wrap; 让 Flex 项目成为多行，可以使元素在不同的行之间自动换行。
---------- - -------- ----- ---------- ----- ---------------- -------------- ------------ ------- - ----- - ------ ------ ------- ------ ------- ----- ----------------- -------- -------- ----- ------------ ------- ---------------- ------- -
上面的样式将会创建一组横向卡片布局，并允许元素自动换行。
总结
通过上述实例，我们可以看到，Flexbox 布局为我们提供了更好的页面布局方案，简化了我们的代码，同时也让页面更具有可读性和可维护性。
在实践中运用 Flexbox 布局时，请一定记得去尝试设置不同的属性值，以寻找最佳的排列方式。
最后，为了帮助你更好地了解 Flexbox 布局，这里附上一些实用的链接：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a8e289add4f0e0ff221a7b