在前端开发中，布局是一个非常重要的部分。随着技术的发展，CSS Flexbox 布局成为了一种流行的布局方式。本文将介绍 Flexbox 的基础知识和高级用法，通过实例加深理解，以期提高前端开发效率。
1. Flexbox 概述
Flexbox（Flexible Box）布局是 CSS3 新增的一种布局模式，它能让容器中的子元素按照一定的规则排列，从而实现强大的布局能力。
Flexbox布局的主要特点如下：
- 支持任意方向的布局：水平、竖直或斜向；
- 支持控制空间分配：可指定元素占多少空间，也可让元素自动适应父容器；
- 支持控制排列顺序：能够非常方便地调整布局顺序；
- 支持对齐方式：容器内每个元素的对齐方式可以自定义。
2. Flexbox 布局基础
2.1 父容器的属性
为了使用 Flexbox 布局，我们需要在父容器中设置 display 属性的值为 flex 或 inline-flex。
---------- - -------- ----- -
Flexbox 布局提供了多种属性来控制子元素的排列方式及对齐方式。下面我们介绍一些常用的 flex 容器属性：
2.1.1 flex-direction
该属性用于设置 flex 容器内子元素的排列方向。默认值是 row，表示子元素沿主轴（水平轴）从左到右排列。可选值有：
- row：默认值，子元素水平排列；
- column：子元素垂直排列；
- row-reverse：子元素水平排列，但顺序与 row 相反；
- column-reverse：子元素垂直排列，但顺序与 column 相反。
---------- - -------- ----- --------------- ------- -
2.1.2 justify-content
该属性用于设置 flex 容器内子元素在主轴上的对齐方式。可选值有：
- flex-start：子元素在主轴起点对齐，默认值；
- flex-end：子元素在主轴终点对齐；
- center：子元素在主轴中心对齐；
- space-between：子元素与父容器两端对齐，子元素间距相等，即第一项在起点，最后一项在终点，其余项等间距；
- space-around：子元素与父容器两端对齐，子元素间距相等，每个子元素两侧距离相等。
---------- - -------- ----- ---------------- -------------- -
2.1.3 align-items
该属性用于设置 flex 容器内子元素在交叉轴上的对齐方式。可选值有：
- stretch：子元素高度等于父容器高度；
- flex-start：子元素在交叉轴起点对齐；
- flex-end：子元素在交叉轴终点对齐；
- center：子元素在交叉轴中心对齐；
- baseline：所有子元素在同一基线上对齐。
---------- - -------- ----- ------------ ------- -
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。
----- - ----- - - ----- -
2.2.2 order
order 属性用于指定子元素的排列顺序。它的值是一个数字，默认为 0。数字越小，排列越靠前。
------------------ - ------ --- -
2.2.3 align-self
align-self 属性在子元素级别上重置 align-items 属性。如果 align-items 属性在父容器中设置为 stretch，则 align-self 属性可能会覆盖它。可选值与 align-items 相同。
----- - ----------- --------- -
3. Flexbox 布局高级
3.1 分栏布局
分栏布局是一种基于 Flexbox 实现网格布局的方案，能够在较少的代码情况下实现复杂的布局。
下面是一个包含两列的分栏布局的示例代码：
---- ------------------ ---- ----------------------------- ---- ----------------- -------------- ------
---------- - -------- ----- - -------- - ----- - - ------ - ----- - ----- - - -- -
在上面的代码中，我们利用了 flex 属性来分配空间。左侧栏的 flex 属性是 1 1 200px，这意味着它可以放大，可以缩小，并且起始大小为 200 像素。右侧内容的 flex 属性是 1 1 0，这意味着它可以放大，可以缩小，并且它的起始大小为 0，也就是自适应父容器大小。
3.2 等高布局
等高布局是一种常见的布局方式，通过 Flexbox 实现也非常简单。
下面是一个示例代码：
---- ------------------ ---- ------------------ ----- -- ------ ----- ---- -- --- -------- --- ----------- --------------- ---- ------------------ ----- --- ---- --- ---------- -------- ----- ---- ---- ----- --- ------------ ---- ----------------- -- ------- ------- ---- - ------ -- ---- --- ---------------- ------
---------- - -------- ----- ------------ -------- - ----- - ----- -- -
在上面的代码中，我们将 align-items 属性设置为 stretch，这样就可以让子元素的高度与父容器相同。同时，item 的 flex 属性设置为 1，表示 item 元素会平分剩余空间，从而实现等高布局。
3.3 圣杯布局
圣杯布局是一种网站主体布局，其主要功能是实现三栏布局：两侧栏固定宽度，中间主栏自适应。
下面是一个示例代码：
---- ------------------ ---- ----------------- -------------- ---- ----------------- ------------- ---- ------------------- ------------- ------
---------- - -------- ----- - ----- - ----- -- - ----- - ----- - - ------ ------------ ------- - ------ - ----- - - ------ ------------- ------- -
在上面的代码中，我们将左侧栏和右侧栏的 flex 属性设置为 0 0 200px，这样可以让左侧栏和右侧栏固定为 200 像素宽度。同时，我们使用 margin 负值来将左侧栏和右侧栏提前，并且让主栏占用左右栏的空间。
4. 总结
本文介绍了 Flexbox 布局的基础知识和高级用法，包括父容器的属性和子元素的属性等，以及分栏布局、等高布局和圣杯布局等实例。通过学习 Flexbox 布局，我们可以更加高效地实现复杂的页面布局，提高前端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c0cf3983d39b4881527d02