Flexbox（Flexible Box Layout）是一种在 CSS3 中新增的弹性布局模型。它不仅提供了一种更加灵活的布局方式，而且可以自适应不同尺寸和屏幕方向，进而提升用户体验。
在这篇文章中，我们将分享对于 Flexbox 的理解和应用算法的详解，并提供一些示例代码供读者学习和参考。
相对布局 vs 弹性布局
我们先来简单比较一下相对布局和弹性布局的差异。
相对布局的实现需要结合 position 属性，通过调整 top、right、bottom 和 left 的值来达到目标。相对布局对于固定布局效果还是值得肯定的，但是对于动态布局变化，比如屏幕旋转，需要重新计算和调整样式，进而耗费更多的时间和精力。
弹性布局的实现则为每个元素提供了一种弹性空间：它会自动占据可用空间的剩余部分，从而即使屏幕的尺寸、方向和内容的大小变化，布局也始终能够呈现出最佳效果，而不需要重新计算和调整样式。
接下来，我们将深入了解弹性布局，并展示如何应用它到前端开发中。
主轴和交叉轴
在弹性布局中，每个容器可以指定两个不同方向的轴：主轴（main axis）和交叉轴（cross axis）。
- 主轴：是设置了 display:flex 属性容器中的内容被排列的轴。它有两个方向：水平方向（row）和竖直方向（column）。
- 交叉轴：是垂直于主轴的轴线。默认与主轴垂直，它的方向随着主轴方向的变化而变化。
以下是一个示例代码，以帮助我们更好地了解主轴和交叉轴的概念。
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- -------------- ------------ ------- - ----- - ------ ------ ------- ----- ----------------- ----- -
在这个示例中，我们设置了一个 .container 容器，它内部有三个子元素（.item1、.item2 和 .item3）。我们通过设置 display:flex，将容器转为了弹性布局模型。
然后，我们设置了 flex-direction 属性，它指定主轴的方向，我们选择水平方向（row）来排列子元素。
我们还在 .container 中添加了两个相应属性：
- justify-content 属性：控制子元素沿着主轴的对齐方式。我们设置为 space-between，这意味着子元素之间将按照空白分配剩余空间。
- align-items 属性：控制子元素沿着交叉轴的对齐方式。我们设置为 center，这意味着子元素将在交叉轴居中对齐。
最终结果如下图所示：
弹性容器属性
除了以上的主轴和交叉轴属性之外，Flexbox 还有一些额外的属性可以用来控制弹性容器。
display
设置元素为弹性容器。
.container {
display: flex;
}flex-direction
指定弹性容器中主轴的方向，有四种取值：row、column、row-reverse 和 column-reverse。
.container {
flex-direction: column-reverse;
}flex-wrap
指定弹性容器在达到容器边界时，如何换行。取值包括 nowrap、wrap 和 wrap-reverse。
.container {
flex-wrap: wrap;
}justify-content
用于沿着主轴的对齐方式。取值包括：flex-start、flex-end、center、space-between、space-evenly 和 space-around。
.container {
justify-content: center;
}align-items
用于沿着交叉轴的对齐方式。取值包括：flex-start、flex-end、center、baseline 和 stretch。
.container {
align-items: stretch;
}align-content
用于多行弹性盒子在交叉轴上的对齐方式。取值包括：flex-start、flex-end、center、space-between、space-evenly、space-around 和 stretch。
.container {
align-content: space-between;
}弹性项目属性
除了弹性容器属性之外，Flexbox 还有一些属性可以用来控制弹性项目。
order
定义项目的排列顺序。
.item {
order: 1;
}flex-grow
定义项目的增长比例。
.item {
flex-grow: 1;
}flex-shrink
定义项目的收缩比例。
.item {
flex-shrink: 1;
}flex-basis
定义项目在主轴方向上的初始尺寸。
.item {
flex-basis: 100px;
}flex
上面的 flex-grow、flex-shrink 和 flex-basis 可以简写为一个 flex 属性。
.item {
flex: 1 1 100px;
}align-self
控制单个项目如何在交叉轴上对齐。
.item {
align-self: center;
}让我们一起实现一个弹性盒子
最后我们通过一个完整的示例，来展示如何使用 Flexbox 实现一款响应式的布局。
HTML
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> </div>
CSS
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------- ----- ---------------- ------- ------------ ------- - ----- - ----- - - ------ ------- ------ ------- ----- ----------------- ----- -
在这个示例中，我们创建了一个 .container 容器，里面包含了五个子元素。我们通过将 display 设置为 flex，来将它转为一个弹性容器。
我们还使用了其他弹性容器的属性：
- 使用 flex-direction 来控制主轴的方向，并选择了水平方向。
- 使用 flex-wrap 来控制是否换行，并选择了 wrap。
- 使用 justify-content 来水平居中对齐，并使用 align-items 来垂直居中对齐。
同时，我们还给每个子元素设置了一个 flex 属性：
flex: 1 1 200px;
这将控制每个子元素在主轴方向上的位置，并使它们按比例占据可用空间。
最终的布局效果如下图所示：
结论
通过本文，我们详细介绍了 Flexbox 的理解和应用算法，包括了弹性容器和弹性项目属性。我们还通过实际示例展示了如何使用 Flexbox 实现一个弹性布局。
作为前端开发人员，在日常开发中经常需要面对各种不同的布局需求。Flexbox 作为 CSS3 的一项重要特性，不仅提供了更加自适应的布局方式，而且还能够简化我们的样式代码。
如果您还没有尝试过使用 Flexbox 这种更加弹性的布局方式，那么现在就是时候开始尝试并应用到您的前端开发中了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670374fcd91dce0dc84b8b3f