前言
在现代的网页开发中，相对布局、绝对布局等传统的布局方式已经无法满足开发者的需求。因此，Flexbox 式布局应运而生，成为了前端开发的新标准。本文将详细介绍 Flexbox 布局的知识点，以及如何将其应用到实际开发中。
什么是 Flexbox 布局
Flexbox 布局是 CSS3 中的一种新布局方式，它可以让网页布局变得更加容易和灵活。Flexbox 布局有两个容器：Flex Container（弹性容器）和 Flex Item（弹性项目），通过设置这两个容器的属性，我们可以实现各种难以在传统布局方式下实现的布局效果。
Flex Container
Flex Container 是指包裹 Flex Item 的容器，通常使用 display: flex 或者 display: inline-flex 属性来定义。其中 display: flex 表示弹性容器会占用整个父容器的宽度，而 display: inline-flex 则只会占用实际需要的宽度。
.container {
display: flex;
}Flex Item
Flex Item 是指弹性容器中的子元素。Flex Item 可以设置的属性还是比较多的。下面是一些常用的属性：
flex-grow：定义 Flex Item 的放大比例，默认为 0，表示不放大。可以是一个数字，也可以是auto。flex-shrink：定义 Flex Item 的缩小比例，默认为 1，表示可以按容器宽度收缩。可以是一个数字，也可以是auto。flex-basis：定义 Flex Item 的基准宽度，默认为auto，表示元素本身的宽度。可以是一个数字，也可以是auto。flex：是flex-grow、flex-shrink和flex-basis的三个属性的缩写。align-self：定义单个项目的对齐方式，可覆盖容器中的align-items属性。值为auto、flex-start、flex-end、center等。
.item {
flex-grow: 2; /* 放大比例为 2 */
flex-shrink: 1; /* 缩小比例为 1 */
flex-basis: 100px; /* 基准宽度为 100px */
flex: 1 1 200px; /* 同时设置放大比例为 1，缩小比例也为 1，基准宽度为 200px */
}如何使用 Flexbox 布局
现在，我们就来看一下如何将 Flexbox 布局应用到实际开发中。
居中布局
首先，我们来看一个比较简单的案例 - 在屏幕中实现简单的居中布局。下面的示例中，我们通过 margin: auto 让 Flex Item 居中。
HTML 代码：
<div class="container"> <div class="item">这是一段文本</div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - ------- ------ -------- ----- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ----- ----------------- -------- ------ ------ ----------- ------- -
其中，我们通过 justify-content: center 和 align-items: center 让 Flex Container 水平和垂直居中。
左右自适应布局
接下来，我们来看一个稍微复杂一些的案例，实现左右自适应布局。在该布局中，左边的容器应该固定宽度，右边的容器则应该填满剩余的空间。
HTML 代码：
<div class="container"> <div class="flex-item item-left">这是左边的元素</div> <div class="flex-item item-right">这是右边的元素</div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - ------- ------ -------- ----- - ---------- - ------ ------ ----------------- -------- ------ ------ ----------- ------- ------- ----- - ----------- - ----- -- -- --------- ----- - -- -- ----------------- ----- ------ ------ ----------- ------- ------- ----- -
在这里，我们通过在右边的元素上添加 flex: 1 属性，让它填满剩余的空间。同时，左边的元素则是一个普通的 Flex Item，固定宽度即可。
总结
Flexbox 布局是一种相对新的布局方式，它可以实现比较复杂的布局效果。在实际开发中，灵活运用 Flexbox 布局，可以极大地提高开发效率，减少代码量。本文仅仅介绍了 Flexbox 布局的一些基础知识，实际上在实际开发中，我们还可以结合 Flexbox 布局的其他属性，实现更为复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503e74595b1f8cacd0aa922