在前端开发中，布局是一个非常重要的部分。在过去，我们可能会用 float 或者 position 来实现布局，但是这些方法在实现复杂布局时会变得非常麻烦。
幸运的是，现在有一种新的布局方法叫做 Flexbox。它是一种基于弹性盒子模型的布局方式，可以让我们更加方便地实现各种布局。在本文中，我们将会介绍如何用 Flexbox 实现一个左侧固定，右侧自适应宽度并且不换行的布局。
Flexbox 简介
在使用 Flexbox 之前，我们需要了解一下它的基本概念。
Flexbox 布局是一种基于弹性盒子模型的布局方式，它有两个轴：主轴和交叉轴。在 Flexbox 布局中，我们可以通过设置 flex 属性来控制元素在主轴和交叉轴上的排列和对齐方式。
下面是一些常用的 Flexbox 属性：
display: flex;：将容器设置为 Flexbox 布局。flex-direction: row/column;：设置主轴的方向，可以是水平方向或者垂直方向。justify-content: flex-start/end/center/space-between/space-around;：设置主轴上的对齐方式。align-items: flex-start/end/center/baseline/stretch;：设置交叉轴上的对齐方式。flex-wrap: nowrap/wrap/wrap-reverse;：设置是否换行。
实现左侧固定，右侧自适应宽度并且不换行的布局
现在我们已经对 Flexbox 有了一定的了解，接下来我们将会介绍如何用 Flexbox 实现一个左侧固定，右侧自适应宽度并且不换行的布局。
首先，我们需要创建一个容器，将其设置为 Flexbox 布局，并且设置主轴方向为水平方向。
<div class="container"> <div class="left">左侧固定</div> <div class="right">右侧自适应宽度并且不换行</div> </div>
.container {
display: flex;
flex-direction: row;
}接下来，我们需要设置左侧元素的宽度，并且将右侧元素的 flex 属性设置为 1，表示它可以占据剩余的空间。同时，我们需要将右侧元素的 flex-wrap 属性设置为 nowrap，防止它换行。
.left {
width: 200px;
}
.right {
flex: 1;
flex-wrap: nowrap;
}最后，我们可以对左侧元素和右侧元素进行对齐。
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ------------ ------- - ----- - ------ ------ - ------ - ----- -- ---------- ------- ----------- ------ -
现在我们已经成功地实现了一个左侧固定，右侧自适应宽度并且不换行的布局。
总结
Flexbox 是一种非常方便的布局方式，它可以让我们更加轻松地实现各种复杂的布局。在实现左侧固定，右侧自适应宽度并且不换行的布局时，我们可以通过设置左侧元素的宽度，将右侧元素的 flex 属性设置为 1，并且将右侧元素的 flex-wrap 属性设置为 nowrap 来实现。同时，我们还可以对左侧元素和右侧元素进行对齐。
希望本文可以对大家学习 Flexbox 布局有所帮助。如果您有任何问题或者建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663c5617d3423812e4a321b3