引言
在前端开发中，经常会遇到需要排版的场景，比如网页中的多行文本、图片、按钮等。在元素很多的情况下，很容易出现子元素溢出容器边界的情况，这既不美观也不易于用户体验。因此，我们需要用一种方法来解决这个问题。Flexbox (弹性盒子布局) 是一种新的布局方式，可以解决我们常见的布局问题，比如元素宽度不等等。
什么是 Flexbox？
Flexbox 是一种 CSS3 提供的新的布局方式，它可以快速方便地对容器内的子元素进行布局和分布。使用 Flexbox，可以轻松地实现各种复杂的布局效果，如垂直居中、弹性布局等。
Flexbox 布局方式
Flexbox 布局方式有两个主要的概念：容器 (Flex Container) 和项目 (Flex Item)。
容器（Flex Container）
容器是用来包裹项目的容器。指定容器为弹性容器可以使用 display: flex 或 display: inline-flex。它的作用是：
- 设定了容器为弹性容器后，子元素会根据指定的属性值自动排列；
- 容器的宽度和高度不是固定的，由里面的元素的大小来决定。
项目（Flex Item）
项目指的是容器里的元素。项目具有弹性的属性，可以使用 flex 属性进行控制。它的作用是：
- 控制项目的大小和位置；
- 控制项目的排列方式。
在项目上定义 flex 属性后，会定义三个属性，分别是 flex-grow、flex-shrink 和 flex-basis。这三个属性的组合可以让项目有更加灵活的布局方式。接下来我们主要介绍 flex-basis 属性如何解决子元素换行后宽度不等的问题。
当子元素数量增多时，容器的宽度是不可控的，这时就会发现有些子元素会自动换行，会导致子元素的宽度不等。我们可以利用 Flexbox 布局中的 flex-basis 属性来解决这个问题。
容器设置
首先，容器需要设置 display: flex 这个 CSS 属性。
.container {
display: flex;
}项目设置
接着，在子元素上，我们需要设置 flex 属性。
.item {
flex: 1;
margin: 10px;
}其中，flex: 1 的意思是所有子元素的宽度均匀分配，不管有多少个。margin: 10px 表示子元素之间的间距大小为 10 像素。
结论
通过这种方式，可以使得子元素的宽度均分，没有出现宽度不等的问题。这样的布局方式能够使得我们的页面看起来更好看、更整洁。同时，子元素的宽度大小会随着容器的大小自动调整，非常方便。
示例代码
// javascriptcn.com 代码示例
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
margin: 10px;
background-color: #42a5f5;
color: #fff;
text-align: center;
font-size: 24px;
}
</style>总结
Flexbox 是一个非常方便、实用的布局方式。在实际的开发中，我们也要多加利用。同时，要注意掌握好它的各个属性，才能使用的更加娴熟。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c905f7d4982a6eb606b3b