在前端开发中，布局是一个非常重要的部分。而 Flexbox 是现代化布局的一项技术，可以让我们轻松地实现各种布局效果。在本文中，我们将讲解如何使用 flex-basis 和 flex-grow 属性来实现不等宽布局。
什么是 Flexbox
Flexbox 是一种用于页面布局的新方案，它可以让开发者更容易地实现灵活的布局效果，这种布局方式在响应式设计中更是不可或缺。与传统的布局方式不同，Flexbox 采用了弹性盒模型，可以在主轴和纵轴方向上自由伸缩，从而实现更加灵活的布局效果。
Flexbox 的基本概念
在使用 Flexbox 进行布局之前，需要先理解一些基础概念：
容器属性
容器属性用于控制项目（即容器中的子元素）在容器内的布局方式。经常使用的容器属性有：
- display：指定容器为 Flexbox 布局；
- flex-direction：设置主轴方向；
- justify-content：设置主轴上项目的对齐方式；
- align-items：设置交叉轴上项目的对齐方式；
- flex-wrap：是否允许一行中的项目换行；
- align-content：设置多行项目在交叉轴上的对齐方式。
项目属性
项目属性用于控制项目自身的布局方式。经常使用的项目属性有：
- order：指定项目的排列顺序，数值越小越靠前；
- flex-grow：指定项目在剩余空间中所占的比例，类似于权重；
- flex-shrink：指定项目缩小时所占的比例；
- flex-basis：指定项目在没有任何 flex-grow 和 flex-shrink 属性时的基础尺寸；
- align-self：设置单个项目在交叉轴上的对齐方式。
使用 flex-basis 和 flex-grow 实现不等宽布局
等宽布局
在 Flexbox 布局中，等宽布局是最简单的一种情况。假设我们有五个块元素需要进行水平布局，每个元素的宽度都是相等的，那么我们可以这样写：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
.container {
display: flex;
}
.item {
flex: 1;
text-align: center;
}这里，我们将 .container 元素设置为 Flexbox 布局，然后使用 flex 属性将 .item 元素的宽度平均分配。
不等宽布局
如果我们需要实现不等宽的布局，比如第一个元素宽度为 100px，其他元素宽度平分剩余空间，该怎么做呢？这时候，flex-basis 和 flex-grow 就派上用场了。
我们可以这样写：
<div class="container"> <div class="item first">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
}
.first {
flex-basis: 100px;
}这里，我们给第一个元素 .first 设置了一个 flex-basis 属性，即基础尺寸。这样，第一个元素的宽度就确定下来了。接着，我们将其他元素的 flex-grow 属性都设置为 1，表示剩余空间平分给它们。
这样，就实现了一个不等宽的布局效果。
总结
在本文中，我们介绍了 Flexbox 的基本概念以及使用 flex-basis 和 flex-grow 实现不等宽布局的方法。学习 Flexbox 布局有助于我们更加轻松地实现灵活的布局效果，提高开发效率。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b54887d4982a6ebd4acd4