CSS Flexbox 是一种强大的布局工具，它可以让我们更轻松地创建响应式和灵活的布局。在本文中，我们将介绍 10 个有趣的布局，它们都可以使用 CSS Flexbox 实现。这些布局不仅仅是好玩的小技巧，还有很多实用的场景，可以帮助我们更好地设计和开发网站。
1. 垂直居中文本
在过去，垂直居中文本是一个很棘手的问题。但是，使用 Flexbox，我们可以轻松地实现这一效果。下面是一个示例：
.container {
display: flex;
align-items: center;
justify-content: center;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 align-items 和 justify-content 属性将文本垂直和水平居中。
2. 自适应 2 列布局
自适应 2 列布局是一种非常流行的设计，可以让我们在同一行上显示两个不同的元素。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
}
.item {
flex: 1;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 flex 属性将两个元素平均分配到容器中。这样，无论容器的大小如何，两个元素都会自适应布局。
3. 等间距网格布局
等间距网格布局是一种常见的设计，可以让我们在同一行或同一列上显示多个元素，并且它们之间的距离相等。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
margin: 0 10px;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 justify-content 属性将元素平均分配到容器中，同时保持它们之间的距离相等。我们还使用 flex 属性将每个元素的宽度平均分配到容器中。
4. 固定宽度网格布局
固定宽度网格布局是一种常见的设计，可以让我们在同一行或同一列上显示多个元素，并且它们的宽度相等。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
}
.item {
width: 100px;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 width 属性将每个元素的宽度设置为相同的固定值。
5. 横向滚动布局
横向滚动布局是一种常见的设计，可以让我们在同一行上显示多个元素，并且在容器不够宽的情况下可以滚动。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
overflow-x: auto;
}
.item {
flex-shrink: 0;
width: 100px;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 overflow-x 属性将容器的内容设置为可以水平滚动。我们还使用 flex-shrink 属性将元素的宽度设置为固定值，并防止它们在容器不够宽的情况下缩小。
6. 响应式导航菜单
响应式导航菜单是一种常见的设计，可以让我们在移动设备上显示折叠菜单，并在桌面设备上显示水平菜单。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 flex-wrap 属性将元素换行。我们还使用 flex 属性将每个元素平均分配到容器中。在媒体查询中，我们将容器的方向更改为垂直，并将菜单项堆叠在一起。
7. 等高列布局
等高列布局是一种常见的设计，可以让我们在同一行上显示多个元素，并且它们的高度相等。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
}
.item {
flex: 1;
display: flex;
flex-direction: column;
}
.item > * {
flex: 1;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 flex 属性将每个元素平均分配到容器中。我们还将每个元素的子元素设置为 Flexbox 布局，并使用 flex 属性将它们平均分配到它们的父元素中。
8. 等高卡片布局
等高卡片布局是一种常见的设计，可以让我们在同一行上显示多个卡片，并且它们的高度相等。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
display: flex;
flex-direction: column;
}
.item > * {
flex: 1;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 flex-wrap 属性将元素换行。我们还使用 flex 属性将每个元素平均分配到容器中。我们还将每个元素的子元素设置为 Flexbox 布局，并使用 flex 属性将它们平均分配到它们的父元素中。
9. 底部固定布局
底部固定布局是一种常见的设计，可以让我们在底部固定一个元素，例如底部导航。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex-shrink: 0;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 flex-direction 属性将容器的方向设置为垂直。我们还使用 min-height 属性将容器的高度设置为视口高度。我们还将内容元素的 flex 属性设置为 1，以填充剩余的空间。最后，我们将底部元素的 flex-shrink 属性设置为 0，以防止它在容器不够高的情况下缩小。
10. 等分列布局
等分列布局是一种常见的设计，可以让我们在容器中显示多个列，并且它们的宽度相等。使用 Flexbox，我们可以轻松地实现这种布局。下面是一个示例：
.container {
display: flex;
}
.item {
flex: 1;
}在这个示例中，我们将容器设置为 Flexbox 布局，并使用 flex 属性将每个元素平均分配到容器中。这样，无论容器的大小如何，每个列都会自适应布局。
总结
这里介绍的 10 个布局只是 CSS Flexbox 可以实现的众多布局中的一部分。使用 Flexbox，我们可以轻松地实现各种各样的布局，从而提高网站的设计和开发效率。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c30421add4f0e0ffd144ed