介绍
CSS Flexbox 是一种新的布局方式，它可以让我们更加灵活地控制元素在容器中的布局。这种布局方式可以让我们轻松地实现响应式布局，并且可以解决一些传统布局方式无法解决的问题。
在本文中，我们将深入探讨 CSS Flexbox 的各种属性和用法，并且讲解如何解决一些常见的问题。
如何使用 Flexbox
在使用 Flexbox 布局之前，我们需要先将父元素的 display 属性设置为 flex。这样子元素就可以使用 Flexbox 布局了。
.container {
display: flex;
}Flexbox 布局有两个主要的轴：主轴和交叉轴。默认情况下，主轴是水平方向，交叉轴是垂直方向。我们可以使用 flex-direction 属性来改变主轴的方向。
.container {
display: flex;
flex-direction: column; /* 改变主轴方向为垂直方向 */
}Flexbox 布局中有很多属性可以用来控制元素的布局，下面我们将逐一介绍这些属性。
Flexbox 属性
1. flex-direction
flex-direction 属性用来指定主轴的方向。默认值为 row，表示水平方向。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}row：默认值，主轴方向为水平方向，起点在左端。row-reverse：主轴方向为水平方向，起点在右端。column：主轴方向为垂直方向，起点在上部。column-reverse：主轴方向为垂直方向，起点在下部。
2. justify-content
justify-content 属性用来指定子元素在主轴上的对齐方式。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}flex-start：默认值，子元素在主轴起点对齐。flex-end：子元素在主轴终点对齐。center：子元素在主轴居中对齐。space-between：子元素在主轴两端对齐，项目之间的间隔相等。space-around：子元素在主轴两端对齐，项目之间的间隔相等，项目与边框的间隔是项目间隔的一半。space-evenly：子元素在主轴上均匀分布。
3. align-items
align-items 属性用来指定子元素在交叉轴上的对齐方式。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}flex-start：子元素在交叉轴起点对齐。flex-end：子元素在交叉轴终点对齐。center：子元素在交叉轴居中对齐。baseline：子元素在基线上对齐。stretch：默认值，子元素在交叉轴上拉伸。
4. align-self
align-self 属性用来指定单个子元素在交叉轴上的对齐方式。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}auto：默认值，继承父元素的align-items属性。flex-start：子元素在交叉轴起点对齐。flex-end：子元素在交叉轴终点对齐。center：子元素在交叉轴居中对齐。baseline：子元素在基线上对齐。stretch：子元素在交叉轴上拉伸。
5. flex-wrap
flex-wrap 属性用来指定子元素是否换行。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap：默认值，不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
6. flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的缩写。
.container {
flex-flow: row nowrap;
}7. align-content
align-content 属性用来指定多行子元素在交叉轴上的对齐方式。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}flex-start：多行子元素在交叉轴起点对齐。flex-end：多行子元素在交叉轴终点对齐。center：多行子元素在交叉轴居中对齐。space-between：多行子元素在交叉轴两端对齐，项目之间的间隔相等。space-around：多行子元素在交叉轴两端对齐，项目之间的间隔相等，项目与边框的间隔是项目间隔的一半。stretch：默认值，多行子元素在交叉轴上拉伸。
8. order
order 属性用来指定子元素的排列顺序。
.item {
order: <integer>;
}<integer>：指定排列顺序，数值越小越靠前，默认为 0。
9. flex-grow
flex-grow 属性用来指定子元素的放大比例。
.item {
flex-grow: <number>;
}<number>：指定放大比例，数值越大放大越多，默认为 0，不放大。
10. flex-shrink
flex-shrink 属性用来指定子元素的缩小比例。
.item {
flex-shrink: <number>;
}<number>：指定缩小比例，数值越大缩小越多，默认为 1，缩小到最小尺寸。
11. flex-basis
flex-basis 属性用来指定子元素的基准尺寸。
.item {
flex-basis: <length> | auto;
}<length>：指定尺寸。auto：默认值，继承父元素的尺寸。
12. flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写。
.item {
flex: <flex-grow> <flex-shrink> <flex-basis>;
}13. align-self
align-self 属性用来指定单个子元素在交叉轴上的对齐方式。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}auto：默认值，继承父元素的align-items属性。flex-start：子元素在交叉轴起点对齐。flex-end：子元素在交叉轴终点对齐。center：子元素在交叉轴居中对齐。baseline：子元素在基线上对齐。stretch：子元素在交叉轴上拉伸。
解决 Flexbox 的问题
虽然 Flexbox 布局非常强大，但是在实际使用中还是会遇到一些问题。下面我们将介绍一些常见的问题以及如何解决。
1. 元素溢出
在使用 Flexbox 布局时，元素可能会溢出容器。这是因为默认情况下，Flexbox 布局中的元素会自动缩小以适应容器大小。
解决方法：使用 min-width 或 min-height 属性来指定元素的最小宽度或最小高度。
.item {
min-width: 0; /* 指定元素的最小宽度 */
}2. 元素不居中
在使用 Flexbox 布局时，元素可能不会居中。这是因为默认情况下，Flexbox 布局中的元素会沿着主轴对齐。
解决方法：使用 margin 属性来居中元素。
.item {
margin: auto; /* 水平和垂直居中 */
}3. 换行出现空白
在使用 Flexbox 布局时，如果元素换行，可能会出现空白。
解决方法：使用 flex-wrap 属性和 align-content 属性来解决。
.container {
flex-wrap: wrap; /* 允许换行 */
align-content: flex-start; /* 多行子元素在交叉轴起点对齐 */
}4. 元素大小不一致
在使用 Flexbox 布局时，元素大小可能不一致。
解决方法：使用 flex 属性来解决。
.item {
flex: 1; /* 元素大小相等 */
}示例代码
下面是一个使用 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: space-between;
align-items: center;
}
.item {
flex: 1;
text-align: center;
}总结
在本文中，我们详细讲解了 CSS Flexbox 布局的各种属性和用法，并且介绍了如何解决一些常见的问题。希望本文能够对你学习和使用 Flexbox 布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d357fd2f5e1655d802717