Flexbox 是一种新的 CSS 布局模式，它可以让我们更轻松地设计复杂的页面布局。在这篇文章中，我们将介绍 Flexbox 布局的基本概念和使用方法，以及一些常见的示例代码。
Flexbox 布局的基本概念
Flexbox 布局是基于弹性盒子模型的，它通过将容器内的元素排列成一行或一列来实现布局。Flexbox 布局有两个基本概念：容器和项目。
容器是指包含了一组项目的元素，它们使用 display: flex 属性来启用 Flexbox 布局。而项目则是容器内的具体元素，它们使用 flex 属性来控制它们在容器内的布局。
如何启用 Flexbox 布局
要启用 Flexbox 布局，我们需要将容器的 display 属性设置为 flex。例如，下面的代码将一个 div 元素设置为 Flexbox 容器：
.container {
display: flex;
}如何控制项目的布局
在 Flexbox 布局中，我们可以使用 flex 属性来控制项目的布局。flex 属性有三个值：flex-grow、flex-shrink 和 flex-basis。
flex-grow 属性控制项目在容器内的伸缩比例，即当容器的空间有剩余时，项目会按照 flex-grow 属性的比例来分配剩余空间。例如，下面的代码将一个 div 元素的 flex-grow 属性设置为 1，表示它会占据容器内剩余空间的一半：
.item {
flex-grow: 1;
}flex-shrink 属性控制项目在容器内的收缩比例，即当容器的空间不足时，项目会按照 flex-shrink 属性的比例来收缩。例如，下面的代码将一个 div 元素的 flex-shrink 属性设置为 0，表示它不会收缩：
.item {
flex-shrink: 0;
}flex-basis 属性指定项目在容器内的初始大小。例如，下面的代码将一个 div 元素的 flex-basis 属性设置为 100px，表示它的初始大小为 100px：
.item {
flex-basis: 100px;
}如何控制容器的布局
在 Flexbox 布局中，我们还可以使用一些属性来控制容器的布局。这些属性包括 flex-direction、justify-content 和 align-items。
flex-direction 属性控制容器内项目的排列方向，它有四个值：row、row-reverse、column 和 column-reverse。例如，下面的代码将容器内的项目排列方向设置为从左到右：
.container {
flex-direction: row;
}justify-content 属性控制容器内项目的水平对齐方式，它有五个值：flex-start、flex-end、center、space-between 和 space-around。例如，下面的代码将容器内的项目水平居中对齐：
.container {
justify-content: center;
}align-items 属性控制容器内项目的垂直对齐方式，它有五个值：flex-start、flex-end、center、baseline 和 stretch。例如，下面的代码将容器内的项目垂直居中对齐：
.container {
align-items: center;
}常见的示例代码
下面是一些常见的 Flexbox 布局示例代码，它们可以帮助你更好地理解 Flexbox 布局的使用方法。
垂直居中
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
align-items: center;
height: 100px;
}
.item {
flex-basis: 100px;
text-align: center;
}等分布局
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
justify-content: space-between;
}
.item {
flex-basis: 30%;
text-align: center;
}等高布局
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
}
.item {
flex-grow: 1;
height: 100px;
text-align: center;
}总结
Flexbox 布局是一种非常强大的 CSS 布局模式，它可以让我们更轻松地设计复杂的页面布局。在本文中，我们介绍了 Flexbox 布局的基本概念和使用方法，以及一些常见的示例代码。希望这篇文章能够帮助你更好地掌握 Flexbox 布局的使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65619122d2f5e1655db9c224