在前端开发中，布局是一个非常重要的部分。随着技术的发展，CSS Flexbox 布局成为了一种流行的布局方式。本文将介绍 Flexbox 的基础知识和高级用法，通过实例加深理解，以期提高前端开发效率。
1. Flexbox 概述
Flexbox（Flexible Box）布局是 CSS3 新增的一种布局模式，它能让容器中的子元素按照一定的规则排列，从而实现强大的布局能力。
Flexbox布局的主要特点如下：
- 支持任意方向的布局：水平、竖直或斜向；
- 支持控制空间分配：可指定元素占多少空间，也可让元素自动适应父容器；
- 支持控制排列顺序：能够非常方便地调整布局顺序；
- 支持对齐方式：容器内每个元素的对齐方式可以自定义。
2. Flexbox 布局基础
2.1 父容器的属性
为了使用 Flexbox 布局，我们需要在父容器中设置 display 属性的值为 flex 或 inline-flex。
.container {
display: flex;
}Flexbox 布局提供了多种属性来控制子元素的排列方式及对齐方式。下面我们介绍一些常用的 flex 容器属性：
2.1.1 flex-direction
该属性用于设置 flex 容器内子元素的排列方向。默认值是 row，表示子元素沿主轴（水平轴）从左到右排列。可选值有：
- row：默认值，子元素水平排列；
- column：子元素垂直排列；
- row-reverse：子元素水平排列，但顺序与 row 相反；
- column-reverse：子元素垂直排列，但顺序与 column 相反。
.container {
display: flex;
flex-direction: column;
}2.1.2 justify-content
该属性用于设置 flex 容器内子元素在主轴上的对齐方式。可选值有：
- flex-start：子元素在主轴起点对齐，默认值；
- flex-end：子元素在主轴终点对齐；
- center：子元素在主轴中心对齐；
- space-between：子元素与父容器两端对齐，子元素间距相等，即第一项在起点，最后一项在终点，其余项等间距；
- space-around：子元素与父容器两端对齐，子元素间距相等，每个子元素两侧距离相等。
.container {
display: flex;
justify-content: space-between;
}2.1.3 align-items
该属性用于设置 flex 容器内子元素在交叉轴上的对齐方式。可选值有：
- stretch：子元素高度等于父容器高度；
- flex-start：子元素在交叉轴起点对齐；
- flex-end：子元素在交叉轴终点对齐；
- center：子元素在交叉轴中心对齐；
- baseline：所有子元素在同一基线上对齐。
.container {
display: flex;
align-items: center;
}2.2 子元素的属性
为了更好地控制子元素的排列方式，我们还需要设置子元素的属性。以下是常用的 flex 子元素属性：
2.2.1 flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。它定义了子元素在主轴方向上的放大、缩小和基础尺寸。
- flex-grow：指定子元素放大比例，当有剩余空间时，子元素将按照其放大比例放大，此时 flex-basis 属性不起作用。默认值为 0，即不放大；
- flex-shrink：指定子元素缩小比例，当剩余空间不足时，子元素根据缩小比例进行缩小，此时 flex-basis 属性不起作用。默认值为 1，即可以缩小；
- flex-basis：指定子元素基础尺寸，即子元素在未放大或缩小时的尺寸，默认值为 auto。
.item {
flex: 1 1 auto;
}2.2.2 order
order 属性用于指定子元素的排列顺序。它的值是一个数字，默认为 0。数字越小，排列越靠前。
.item:nth-child(2) {
order: -1;
}2.2.3 align-self
align-self 属性在子元素级别上重置 align-items 属性。如果 align-items 属性在父容器中设置为 stretch，则 align-self 属性可能会覆盖它。可选值与 align-items 相同。
.item {
align-self: flex-end;
}3. Flexbox 布局高级
3.1 分栏布局
分栏布局是一种基于 Flexbox 实现网格布局的方案，能够在较少的代码情况下实现复杂的布局。
下面是一个包含两列的分栏布局的示例代码：
<div class="container"> <div class="sidebar">Sidebar</div> <div class="main">Main Contents</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - -------- - ----- - - ------ - ----- - ----- - - -- -
在上面的代码中，我们利用了 flex 属性来分配空间。左侧栏的 flex 属性是 1 1 200px，这意味着它可以放大，可以缩小，并且起始大小为 200 像素。右侧内容的 flex 属性是 1 1 0，这意味着它可以放大，可以缩小，并且它的起始大小为 0，也就是自适应父容器大小。
3.2 等高布局
等高布局是一种常见的布局方式，通过 Flexbox 实现也非常简单。
下面是一个示例代码：
<div class="container"> <div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> <div class="item">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div> <div class="item">When an unknown printer took a galley of type and scrambled.</div> </div>
.container {
display: flex;
align-items: stretch;
}
.item {
flex: 1;
}在上面的代码中，我们将 align-items 属性设置为 stretch，这样就可以让子元素的高度与父容器相同。同时，item 的 flex 属性设置为 1，表示 item 元素会平分剩余空间，从而实现等高布局。
3.3 圣杯布局
圣杯布局是一种网站主体布局，其主要功能是实现三栏布局：两侧栏固定宽度，中间主栏自适应。
下面是一个示例代码：
<div class="container"> <div class="main">Main Contents</div> <div class="left">Left Sidebar</div> <div class="right">Right Sidebar</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----- -- - ----- - ----- - - ------ ------------ ------- - ------ - ----- - - ------ ------------- ------- -
在上面的代码中，我们将左侧栏和右侧栏的 flex 属性设置为 0 0 200px，这样可以让左侧栏和右侧栏固定为 200 像素宽度。同时，我们使用 margin 负值来将左侧栏和右侧栏提前，并且让主栏占用左右栏的空间。
4. 总结
本文介绍了 Flexbox 布局的基础知识和高级用法，包括父容器的属性和子元素的属性等，以及分栏布局、等高布局和圣杯布局等实例。通过学习 Flexbox 布局，我们可以更加高效地实现复杂的页面布局，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0cf3983d39b4881527d02