随着移动设备的普及和网页应用的发展，对于移动端的自适应布局需求也越来越高。Flexbox，是一种新的布局模式，可以更加灵活的进行移动端自适应布局。本文将详细介绍 Flexbox 在移动端的应用。
什么是 Flexbox？
Flexbox（Flexible Box）是 CSS3 中的一种新的布局模式，它能够更加灵活地进行布局。通过 Flexbox，我们可以轻松实现响应式布局，为不同屏幕尺寸的设备提供相应的布局方案。
Flexbox 布局基础
Flexbox 容器和项目
在使用 Flexbox 进行布局时，我们需要使用两个关键概念：Flexbox 容器和 Flexbox 项目。Flexbox 容器是我们要进行布局的容器，而 Flexbox 项目则是容器中的子元素。
Flexbox 的主轴和副轴
在 Flexbox 布局中，会存在主轴和副轴两个方向。其中，主轴是我们排列子元素的方向（默认为水平方向），而副轴则是与主轴垂直的方向（默认为竖直方向）。
Flexbox 容器属性
为了控制 Flexbox 容器的布局方式，我们需要使用以下几个属性：
display:flex;设置元素为 Flexbox 布局flex-direction:row/column;控制主轴的方向justify-content:flex-start/flex-end/center/space-between/space-around;设置主轴上的对齐方式align-items:flex-start/flex-end/center/stretch/baseline;设置副轴上的对齐方式
Flexbox 项目属性
为了控制 Flexbox 项目的布局方式，我们需要使用以下几个属性：
flex-grow:number;控制项目在主轴上的扩展比例flex-shrink:number;控制项目在主轴上的收缩比例flex-basis:length/percentage;定义项目的基础长度flex:none/auto;控制项目是否可以扩展或收缩
Flexbox 在移动端的应用
移动端常用布局之常规流布局
在移动端开发中，我们通常会使用常规流布局。但在一些复杂的排版需求场景下，常规流布局会面临很多不便利的问题。
比如说，我们在手机浏览器上打开一个网站，它的布局可能是这样的：
-- -------------------- ---- -------
---- ------------------
---- -----------------------
---- ------------------------
---- --------------------
------
-------
---------- -
------ -----
------- -----
----------------- -----
-
----- -
------ ----
------- -----
----------------- -----
------ -----
-
------ -
------ ----
------- -----
----------------- -----
------ -----
-
------ -
------ -----
-
--------但当我们旋转手机时，布局就会变得很不友好：
这时候，我们可以使用 Flexbox 来进行优化。
使用 Flexbox 进行自适应布局
我们可以通过以下方式，使用 Flexbox 进行优化：
-- -------------------- ---- -------
---- ------------------
---- -----------------------
---- ------------------------
------
-------
---------- -
-------- -----
--------------- ----
---------------- --------------
------- -----
----------------- -----
-
----- -
----- --
----------------- -----
-
------ -
----- --
----------------- -----
-
--------这样做的好处是，无论我们怎样旋转手机，左右两侧的宽度都会自动适应，保持一致：
实战示例
我们来实现一个简单的移动端自适应布局示例。首先，我们设计一个头部的导航栏：
-- -------------------- ---- -------
---- ------------
---- -------------
---- -------------- ---------- --
------
---- -------------
----
-----------
-----------
-------------
-------------
-----
------
------
-------
---- -
-------- -----
---------------- --------------
------------ -------
----------------- -----
------ -----
------- -----
-------- - -----
----------- -----------
-
----- -
------ ------
------- -----
-
----- --- -
------ -----
------- -----
-
----- -
----- --
----------- ------
-
----- -- -
----------- -----
------- --
-------- --
-
----- -- -
-------- -------------
------------ -----
---------- -----
-
--------我们为头部的导航栏设置了 display:flex; 属性，即使我们旋转手机屏幕，导航栏也可以很好的进行自适应布局。
接下来，我们再实现一个主体部分的自适应布局：
-- -------------------- ---- -------
---- ------------------
---- ----------------
----
-----------
-----------
-----------
-----------
-----
------
---- ----------------
-------------
-------------------------------------------------------------------------------------------
------
------
-------
---------- -
-------- -----
--------------- ----
------- -----
----------------- -----
-
-------- -
------ ------
------------- --- ----- -----
-------- -----
----------- -----------
----------- -------
-
-------- -- -
----------- -----
------- --
-------- --
-
-------- -- -
-------------- ----
---------- -----
-
-------- -
----- --
-------- -----
-
-------- -- -
-------------- -----
---------- -----
-
-------- - -
------------ ----
------------ ----
-
--------这个布局是一个左边导航栏，右边是主体内容的布局，我们使用了 display:flex; 和 flex 属性来处理布局，这样就能很好的对移动端进行适配，使该布局更加美观和优雅了。
总结
Flexbox 布局模式可以在移动端适应不同的屏幕尺寸，为移动端设计提供了更多的布局灵活性。通过掌握 Flexbox 布局的基础知识和应用技巧，我们可以更好地实现移动端自适应布局。未来移动端一定会更加重视自适应设计，相信大家掌握了 Flexbox 布局技巧，就可以更加灵活的应对未来的移动端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6477ff67968c7c53b0446a1a