CSS Flexbox 是一种强大的布局方式，它可以帮助我们轻松地实现复杂的布局效果。在本文中，我们将介绍 CSS Flexbox 常用属性，以及如何使用它们来创建灵活的布局。
什么是 CSS Flexbox？
CSS Flexbox 是一种新的布局模式，它可以帮助我们在不使用浮动、定位或表格布局的情况下创建复杂的布局。Flexbox 布局是基于容器和项目两个概念，容器是包含项目的父元素，而项目则是容器内的子元素。通过对容器和项目应用不同的属性，我们可以轻松地实现各种布局效果。
容器属性
display
Flexbox 布局的第一步是将容器的 display 属性设置为 flex 或 inline-flex，以启用 Flexbox 布局。
.container {
display: flex;
}flex-direction
flex-direction 属性用于设置项目的排列方向，有以下四个值可选：
- row：默认值，水平方向从左到右排列；
- row-reverse：水平方向从右到左排列；
- column：垂直方向从上到下排列；
- column-reverse：垂直方向从下到上排列。
.container {
flex-direction: row;
}flex-wrap
flex-wrap 属性用于设置项目是否换行，有以下三个值可选：
- nowrap：默认值，不换行；
- wrap：换行，第一行在上方；
- wrap-reverse：换行，第一行在下方。
.container {
flex-wrap: wrap;
}justify-content
justify-content 属性用于设置项目在主轴上的对齐方式，有以下五个值可选：
- flex-start：默认值，左对齐；
- flex-end：右对齐；
- center：居中对齐；
- space-between：两端对齐，项目之间的间隔相等；
- space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍。
.container {
justify-content: center;
}align-items
align-items 属性用于设置项目在交叉轴上的对齐方式，有以下五个值可选：
- stretch：默认值，项目被拉伸以适应容器；
- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：交叉轴的中点对齐；
- baseline：项目的第一行文字的基线对齐。
.container {
align-items: center;
}align-content
align-content 属性用于设置多行项目在交叉轴上的对齐方式，有以下六个值可选：
- stretch：默认值，项目被拉伸以适应容器；
- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：交叉轴的中点对齐；
- space-between：与交叉轴两端对齐，项目之间的间隔相等；
- space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍。
.container {
align-content: center;
}项目属性
order
order 属性用于设置项目的排列顺序，数值越小，排列越靠前，默认值为 0。
.item {
order: 1;
}flex-grow
flex-grow 属性用于设置项目的放大比例，如果父容器有剩余空间，会按照 flex-grow 属性的比例分配给子项目。
.item {
flex-grow: 1;
}flex-shrink
flex-shrink 属性用于设置项目的缩小比例，如果空间不足，会按照 flex-shrink 属性的比例缩小子项目。
.item {
flex-shrink: 1;
}flex-basis
flex-basis 属性用于设置项目的基准大小，可以是一个具体的像素值，也可以是一个百分比。
.item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写，可以一次性设置这三个属性。
.item {
flex: 1 1 100px;
}align-self
align-self 属性用于设置单个项目在交叉轴上的对齐方式，可以覆盖 align-items 属性。它的取值与 align-items 属性相同。
.item {
align-self: center;
}示例代码
下面是一个简单的 Flexbox 布局示例：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
flex: 1 1 100px;
text-align: center;
font-size: 24px;
color: #fff;
background-color: #007bff;
margin: 10px;
}在上面的示例中，我们将容器的 display 属性设置为 flex，将项目的排列方向设置为 row，将项目在主轴上的对齐方式设置为 center，将项目在交叉轴上的对齐方式设置为 center。每个项目的基准大小都是 100px，通过 flex 属性设置项目的放大比例和缩小比例，使它们在容器中平均分配剩余空间。最终的效果如下图所示：
总结
CSS Flexbox 是一种强大的布局方式，可以帮助我们轻松地实现复杂的布局效果。通过掌握容器属性和项目属性，我们可以灵活地使用 Flexbox 布局来创建各种布局效果。在实际开发中，我们可以根据具体的需求来选择合适的属性来实现布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65553fa5d2f5e1655df4e778