在前端开发中，实现复杂布局是一项常见的任务。而Flexbox布局则是一种在Web开发中非常流行的技术，它能够用于各种类型的布局，让开发者轻松搞定各种复杂的页面布局需求。
什么是Flexbox布局
Flexbox是一种用于排列元素之间的空间分配和对齐的布局模型。简单来说，它是一种能够更加灵活地实现网页布局的方式，通过设置父元素的display为flex，然后对子元素进行一系列的属性设置，就可以轻松实现各种复杂的布局。
Flexbox使用指南
1.父容器的属性设置
实现Flexbox布局，首先需要设置父容器的属性，就是给父元素添加display:flex;。
---------- -
-------------
-2.子元素的相关属性设置
在Flexbox中，子元素的属性设置就显得尤为重要了。需要设置的属性有：
2.1 justify-content属性
该属性是用于定义子元素在父元素水平方向的对齐方式。一共有五个取值，分别为：flex-start、center、flex-end、space-between和space-around。其中，flex-start表示左对齐，center表示居中对齐，flex-end表示右对齐，space-between表示平分空白，space-around表示多出来的空白平分给各个子元素。
---------- -
-------------
----------------------- -- --------- --
-2.2 align-items属性
该属性是用于定义子元素在父元素垂直方向的对齐方式。一共有五个取值，分别为：flex-start、center、flex-end、baseline和stretch。其中，flex-start表示向上对齐，center表示居中对齐，flex-end表示向下对齐，baseline表示基线对齐，stretch表示子元素占满整个容器。
---------- -
-------------
------------------- -- --------- --
-2.3 flex-wrap属性
该属性定义如何换行，以及是否允许子元素扩张父元素。取值有三种，分别为：nowrap（默认）、wrap和wrap-reverse。nowrap表示不允许换行，所有元素都在一行上，然后子元素缩小以适应容器。wrap表示允许换行，然后每个元素都会尽可能地扩充一行，然后从下一行开始。wrap-reverse表示允许换行，但是从下一行开始。
---------- -
-------------
--------------- -- ------------------- --
-2.4 flex-direction属性
该属性用于定义Flex容器中子元素的排列方式。一共有四个取值，分别为：row（默认值）表示横向的一行；row-reverse表示横向的一行，但是子元素的排列方式与row相反；column表示竖向排列，从上向下排列；column-reverse表示竖向排列，从下向上排列。
---------- -
-------------
--------------------------- -- ------------------------ --
-2.5 align-content属性
该属性用于定义当有多行元素时，子元素在父元素的纵轴方向上的排列方式。一共有六个取值，分别为：flex-start、flex-end、center、space-between、space-around和stretch。其中，flex-start表示向上对齐，center表示居中对齐，flex-end表示向下对齐，space-between表示平分空白，space-around表示多出来的空白平分给各个子元素，stretch表示子元素占满整个容器。
---------- -
-------------
--------------------- -- ---------------- --
-示例代码
下面是一个包含所有属性的完整示例代码：
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
---------- -
-------------
---------------
-----------------------
-------------------
----------------------
----------------------
-------------
----------------
-
----- -
-------
----------------
------------
------------------
------------------
---------------
-
--------在该示例代码中，.container表示父元素，.item表示子元素。该示例代码中的效果是：所有子元素在父元素中间排列，每个子元素均匀占据整个父元素的高度，并且子元素均为横向排列。
结论
Flexbox布局能够让开发者轻松搞定各种复杂的页面布局需求，实现自适应的排列方式。只要对父容器和子元素的相关属性进行设置即可。值得一提的是，Flexbox布局并不是万能的。在一些特殊情况下可能会出现异常情况，需要开发者自己掌握。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67203ae42e7021665e0146e3