在 Web 前端开发中，页面的布局是一个非常基础却也非常重要的知识点。而在传统的布局方式中，我们常常需要使用 float、position 等属性来实现复杂的布局效果，但这些属性却很难使我们达到理想的效果。为此，在 CSS3 中，Flexbox 布局诞生了。它能够让我们更加方便、高效地实现页面布局，甚至连响应式布局都可以轻松实现。
理解 Flexbox 布局
Flexbox 布局是一种基于弹性布局的 CSS3 模块，它为元素提供了更加灵活的分布性，并且可以在不同设备尺寸下自动调整元素的布局位置。如果你还没有尝试过 Flexbox 布局，以下这张图或许是对它的一个初步认识。
从图中可以看出，Flexbox 布局主要由以下几个元素组成：
- 容器 (Container)：包含要进行布局的元素，与传统布局相同。
- 项目 (Item)：需要被定位和分配布局的属性，也就是所有子元素。
Flexbox 布局属性
在实现 Flexbox 布局时，我们需要使用一些属性来定义容器、项目之间的布局关系，以下是其主要属性。
容器属性
display
这是最主要的属性，我们需要在容器上使用 display 属性并设置其值为 flex 或 inline-flex。其中，flex 表示块级元素，inline-flex 表示内联元素。
.container {
display: flex;
/* or */
display: inline-flex;
}flex-direction
该属性指定了容器中项目的主轴方向，可选值包括 row、row-reverse、column、column-reverse。
row：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}flex-wrap
该属性指定项目在一条轴线上排不下时是否换行，可选值为 nowrap、wrap、wrap-reverse。
nowrap：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}justify-content
该属性指定了项目在主轴上的对齐方式，可选值包括：
flex-start：左对齐。flex-end：右对齐。center：居中。space-between：两端对齐，项目之间的间隔相等。space-around：每个项目两侧的间隔相等。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}align-items
该属性指定了项目在交叉轴上的对齐方式，可选值包括：
flex-start：上对齐。flex-end：下对齐。center：居中。baseline：项目的第一行文字的基线对齐。stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}align-content
类似于 justify-content，该属性指定了多行项目在交叉轴上的对齐方式，可选值包括：
flex-start：上对齐。flex-end：下对齐。center：居中。space-between：两端对齐，项目之间的间隔相等。space-around：每个项目两侧的间隔相等。stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}项目属性
order
该属性指定项目的排列顺序，可以是一个整数值。默认为 0，可以为负值。
.item {
order: <integer>;
}flex-grow
该属性指定了项目的放大比例，默认为 0，即如果存在剩余空间也不放大。
.item {
flex-grow: <number>; /* default 0 */
}flex-shrink
该属性指定了项目的缩小比例，默认为 1，即如果空间不足，该项目会缩小。
.item {
flex-shrink: <number>; /* default 1 */
}flex-basis
该属性指定了在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性计算空间的分配比例，默认值为 auto，即项目原有大小。
.item {
flex-basis: <length> | auto; /* default auto */
}flex
flex 属性是 flex-grow, flex-shrink 以及 flex-basis 的简写形式。
.item {
/* flex: flex-grow flex-shrink flex-basis */
flex: 1 1 auto;
}align-self
该属性允许自己在交叉轴上对齐，覆盖容器的 align-items 属性。默认值为 auto，表示继承容器的 align-items 属性。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}示例代码
下面我们通过一些示例代码来更清晰地理解 Flexbox 布局的应用。
示例 1：简单的 Flexbox 基本布局
我们来创建一个简单的 Flexbox 布局，将其应用到一个具有固定高度并纵向滚动的 div 容器中。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ------- ------ ----------- ----- - ----- - -------- ---- ------- ---- ----------------- -------- ------ ------ ---------- ----- -
在上面的代码中，我们给容器设置了一个固定的高度，使其具有纵向滚动条。然后，我们将容器的 display 属性设置为 flex，让其成为一个 Flexbox 布局，同时使用 flex-direction: column 属性让容器内的项目垂直排列。接下来，将 .item 类的项目的样式进行简单的设置。最终，我们得到了一个由三个背景颜色为橙色、字体颜色为白色、具有内外边距的等大盒子组成的垂直滚动栏。
示例 2：侧边栏布局
现在，我们来创建一个带有固定宽度的侧边栏布局，其中侧边栏的宽度设置为 250 像素，主要内容区居右。
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - -------- - ------ ------ ----------------- -------- ------ ------ ----------- ------- - ----- - ----- -- ----------------- -------- -------- ----- -
与上一个示例相同，我们也将 .container 的 display 属性设置为 flex，但是不同的是，我们并没有使用 flex-direction 属性，而是使用了默认的 row 方向，使得两个子元素并排展示。然后，我们将 .sidebar 的宽度设置为 250 像素，内容居中，并且设置为背景颜色为深蓝色，字体颜色为白色。接下来，我们将 .main 类的元素的 flex 属性设置为 1，它会充满剩下的所有空间，而其他元素需要用 width 属性来表示。
总结
Flexbox 布局是一种非常优秀的布局方式，通过它，我们可以轻松实现很多在传统布局中无法完成的效果，并且可以使布局更加高效、简洁。随着移动设备市场的扩大，它在响应式布局方面的优势表现得越来越明显。如果你还没有尝试过使用 Flexbox 布局实现页面布局，不妨来学习一下吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481739f48841e98940e9386