作为前端开发人员，在移动端开发中进行布局处理是无法避免的。而在如今大量的移动设备中，屏幕大小、分辨率甚至显示比例都不尽相同，这就需要在移动端布局时采用一种更加灵活的方式来实现。
这时候，Flexbox 布局将是一个不错的选择。Flexbox 布局是 CSS3 中新增的一种盒子模型，它更加适合于一些未知尺寸的设备上，能够更加灵活地调整布局，并且与响应式设计（Responsive Design）的理念非常契合。
Flexbox 布局的基本概念
在理解 Flexbox 布局之前，我们需要先来了解一些基本概念。
容器（container）
Flexbox 布局采用的是一种父子结构，容器是指子元素的父元素，它定义了一些布局的特性。
项目（item）
容器中的直接子元素即为项目，是具体布局操作的对象。
主轴（main axis）
在容器中，Flexbox 布局所采用的主要方向称之为主轴。默认为水平方向，方向可以通过 flex-direction 属性来设置。
交叉轴（cross axis）
垂直于主轴的方向称之为交叉轴。
主轴起点（main start）和主轴终点（main end）
在主轴方向上，项目的排列是从主轴起点开始往主轴终点进行排列的。
交叉轴起点（cross start）和交叉轴终点（cross end）
在交叉轴方向上，起点和终点的定义与主轴方向相同。
伸缩容器（flex container）
采用了 Flexbox 布局的容器成为伸缩容器。
伸缩项目（flex item）
采用了 Flexbox 布局的项目成为伸缩项目。
Flexbox 布局的基本实现
接下来，我们讲解一下如何实现 Flexbox 布局，并进行一些基本示例。
容器的基本用法
我们可以通过 display 属性将一个块级元素转化为伸缩容器，代码如下：
---------- - -------- ----- -- ----------------- -- -
项目的基本用法
在容器内，我们可以对项目进行排列操作。例如将项目排列为从左到右，代码如下：
---------- - -------- ----- --------------- ---- -
这里我们使用了 flex-direction 属性将主轴方向设置为水平方向，又因为设置了 row 所以项目的排列顺序为从左到右。
另外，我们还可以对项目进行对齐操作，例如将项目对齐到主轴开始位置和交叉轴开始位置上，代码如下：
---------- - -------- ----- ---------------- ----------- ------------ ----------- -
这里我们使用了 justify-content 属性将项目在主轴上进行水平方向的对齐操作，设置为 flex-start 表示项目对齐到主轴起点位置。然后使用了 align-items 属性将项目在交叉轴上进行垂直方向的对齐操作，设置为 flex-start 表示项目对齐到交叉轴起点位置。
项目的尺寸设置
在 Flexbox 布局中，我们还可以对项目的尺寸进行设置，包括项目的宽度、高度、最大宽度、最大高度等。
例如，我们可以将项目的宽度设置为 100 像素，代码如下：
----- - ----------- ------ -
这里我们使用了 flex-basis 属性将项目的尺寸设置为 100 像素，注意 flex-basis 属性只是一个初始值，并不能保证最终尺寸一定是 100 像素。
项目的排列顺序设置
不论我们进行了何种排列方向的设置，在某些情况下我们还需要对项目的排列顺序进行调整。例如，将项目B设置为第一项，将项目A设置为第二项，代码如下：
---------- - -------- ----- - ------- - ------ -- - ------- - ------ -- -
这里我们使用了 order 属性调整了项目的排列顺序，数值越小，排列越靠前。
Flexbox 布局的实际应用
除了上述基本实现示例外，我们还可以将 Flexbox 布局应用到实际场景中。
例如，在一个导航栏中，我们需要将多个项目进行顺序排列，并且在屏幕缩放时宽度也能保持一致，示例代码如下：
---- ------------ ---- ----------------------- ---- ------------------------ ---- -------------------------- ---- ----------------------- ---- ---------------------- ------
---- - -------- ----- ---------------- ------- ------------ ------- - ----- - ---------- -- ----------- ------- -
这里我们使用 flex-grow 属性让项目根据容器宽度进行自适应，并且通过 justify-content 属性将项目在主轴上居中对齐，并使用 align-items 属性将项目在交叉轴上垂直方向上居中对齐。
在实际开发中，我们还可以将 Flexbox 布局运用到表单布局中，图片列表布局中等等，较多的具体实例可以参考 A Complete Guide to Flexbox。
总结
Flexbox 布局作为 CSS3 中新增的一种布局方式，特别适用于一些未知尺寸的移动设备上。采用 Flexbox 布局，我们可以更加灵活地调整布局，并且将响应式设计的理念更加贴合到移动端布局中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64688d1e968c7c53b08babee