实现复杂布局，用 Flexbox 轻松搞定-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实现复杂布局是一项常见的任务。而Flexbox布局则是一种在Web开发中非常流行的技术，它能够用于各种类型的布局，让开发者轻松搞定各种复杂的页面布局需求。

什么是Flexbox布局

Flexbox是一种用于排列元素之间的空间分配和对齐的布局模型。简单来说，它是一种能够更加灵活地实现网页布局的方式，通过设置父元素的display为flex，然后对子元素进行一系列的属性设置，就可以轻松实现各种复杂的布局。

Flexbox使用指南

1.父容器的属性设置

实现Flexbox布局，首先需要设置父容器的属性，就是给父元素添加display:flex;。

.container {
    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表示多出来的空白平分给各个子元素。

.container {
    display:flex;
    justify-content:center; /* 子元素水平居中对齐 */
}

2.2 align-items属性

该属性是用于定义子元素在父元素垂直方向的对齐方式。一共有五个取值，分别为：flex-start、center、flex-end、baseline和stretch。其中，flex-start表示向上对齐，center表示居中对齐，flex-end表示向下对齐，baseline表示基线对齐，stretch表示子元素占满整个容器。

.container {
    display:flex;
    align-items:center; /* 子元素垂直居中对齐 */
}

2.3 flex-wrap属性

该属性定义如何换行，以及是否允许子元素扩张父元素。取值有三种，分别为：nowrap（默认）、wrap和wrap-reverse。nowrap表示不允许换行，所有元素都在一行上，然后子元素缩小以适应容器。wrap表示允许换行，然后每个元素都会尽可能地扩充一行，然后从下一行开始。wrap-reverse表示允许换行，但是从下一行开始。

.container {
    display:flex;
    flex-wrap:wrap; /* 子元素允许换行，每个元素尽可能扩充一行 */
}

2.4 flex-direction属性

该属性用于定义Flex容器中子元素的排列方式。一共有四个取值，分别为：row（默认值）表示横向的一行；row-reverse表示横向的一行，但是子元素的排列方式与row相反；column表示竖向排列，从上向下排列；column-reverse表示竖向排列，从下向上排列。

.container {
    display:flex;
    flex-direction:row-reverse; /* 子元素横向排列，但是子元素的排列方式与row相反 */
}

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 {
    display:flex;
    align-content:center; /* 子元素在父元素纵轴方向上居中对齐 */
}

示例代码

下面是一个包含所有属性的完整示例代码：

-- -------------------- ---- -------
---- ------------------
    ---- ----------------- -------
    ---- ----------------- -------
    ---- ----------------- -------
------

-------
---------- -
    -------------
    ---------------
    -----------------------
    -------------------
    ----------------------
    ----------------------
    -------------
    ----------------
-
----- -
    -------
    ----------------
    ------------
    ------------------
    ------------------
    ---------------
-
--------

在该示例代码中，.container表示父元素，.item表示子元素。该示例代码中的效果是：所有子元素在父元素中间排列，每个子元素均匀占据整个父元素的高度，并且子元素均为横向排列。

结论

Flexbox布局能够让开发者轻松搞定各种复杂的页面布局需求，实现自适应的排列方式。只要对父容器和子元素的相关属性进行设置即可。值得一提的是，Flexbox布局并不是万能的。在一些特殊情况下可能会出现异常情况，需要开发者自己掌握。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67203ae42e7021665e0146e3