Flexbox 是 CSS3 中的一种布局模式，它可以让我们更方便地实现复杂的布局效果。但是在实际开发中，我们也会遇到一些坑，本文将会分享一些常见的 Flexbox 坑以及解决方案。
1. 父元素的高度不固定时，子元素的高度无法自适应
在 Flexbox 布局中，子元素的高度默认是和父元素一样的，但是当父元素的高度不固定时，子元素的高度就无法自适应了。
解决方案：
可以给父元素设置 display: flex; flex-direction: column;，然后给子元素设置 flex: 1;，这样子元素就会自动填满父元素的高度。
示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
.container { display: flex; flex-direction: column; } .item { flex: 1; }
2. 子元素的宽度无法自适应
在 Flexbox 布局中，子元素的宽度默认是根据内容自适应的，但是当子元素的宽度需要自适应父元素时，就会出现问题。
解决方案：
可以给父元素设置 display: flex;，然后给子元素设置 flex: 1;，这样子元素就会自动填满父元素的宽度。
示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
.container { display: flex; } .item { flex: 1; }
3. 子元素的顺序无法调整
在 Flexbox 布局中，子元素的顺序默认是根据 HTML 代码中的顺序排列的，但是有时候我们需要调整子元素的顺序。
解决方案：
可以使用 order 属性来调整子元素的顺序，值越小的子元素越靠前。
示例代码：
<div class="container"> <div class="item" style="order: 3;"></div> <div class="item" style="order: 1;"></div> <div class="item" style="order: 2;"></div> </div>
.container { display: flex; } .item { flex: 1; }
4. 子元素的间距无法控制
在 Flexbox 布局中，子元素的间距默认是根据父元素的宽度和子元素的宽度自动计算的，但是有时候我们需要自己控制子元素的间距。
解决方案：
可以使用 justify-content 属性来控制子元素的间距，常用的值有 flex-start、center、flex-end、space-between、space-around。
示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
.container { display: flex; justify-content: space-between; } .item { width: 100px; }
5. 子元素的换行方式无法控制
在 Flexbox 布局中，子元素默认是在一行中排列的，但是当子元素的宽度超过父元素的宽度时，子元素会自动换行。
解决方案：
可以使用 flex-wrap 属性来控制子元素的换行方式，常用的值有 nowrap、wrap、wrap-reverse。
示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
.container { display: flex; flex-wrap: wrap; } .item { width: 100px; }
结语
以上就是一些常见的 CSS Flexbox 坑以及解决方案，希望对大家有所帮助。在实际开发中，我们还会遇到更多的问题，需要不断的学习和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cbaddce46428fe9e4aa1c8
