flex布局详解【缺图】

[laizimo]

前言

往往在移动端开发过程中，弹性布局是非常实用的一种手段。往往你并不需要去反复的使用媒体查询的。整整的响应式布局是使界面能够自动的根据屏幕进行变化，做到完美的弹性布局，在必要的时候，去使用媒体查询，对页面进行调整。本篇所讲述的正是，在移动端响应式布局当中被经过使用的一个东西flexbox(弹性盒子)

正文

flex布局，被称为弹性布局。看懂flex可以从两个地方出发：容器和子项目。

何为容器，就是设定display为flex的地方。如图所示：

而容器内部的直接子项就是flex item，简称为项目。如图所示：

在清楚了flex的结构划分之后，我们还要牢记的是flex的轴线(axis)。正如坐标系，具备着x轴与y轴，flex在整个布局当中，也可分为水平方向和垂直方向，简称为主轴和交叉轴，如图所示：

整个图片上还有main start，就是项目到容器的开始位置，而main end，就是项目到容器结束的位置。同理，cross start和cross end就是交叉轴上面的开始和结束的位置。当然了，还有main size和cross size就是项目的水平距离和垂直距离。

分析完，这一部分，下面的东西是需要记忆和实践的。因为，往往在面试中提问flex也是针对于容器和项目的一些内部属性值展开的。

首先，我们来了解一下container的一些基本属性值

1. display 表示容器展示的布局类型，可设定为flex和inline-flex。两者的设定也就是inline和block的区别。当然了，在webkit内核的浏览器(safari)中使用时，需要在其前面加上前缀(-webkit-flex)

.container{
    display: -webkit-flex;
    display: flex; /* or inline-flex*/
}

2. flex-direction 表示容器内部子项目的展示方向。它主要有四个方向，如图：

而这四个方向也有四个值row,row-reverse,column,column-reverse。css的表示如下

.container{
    flex-direction: row   /* 默认 行正序*/ ||  row-reverse /*行倒序*/ ||  column  /* 列正序*/ || column-reverse /*列倒序*/
}

3. flex-wrap 表示当容器内部内容超出容器时，容器是否分行展示。

如图所示:

这个属性的值，有三种：nowrap(浏览器默认，不分行) 、wrap(超出的部分分行处理)、wrap-reverse(分行逆序).

.container{
   flex-wrap: nowrap || wrap || wrap-reverse;
}

4. flex-flow: 这个属性就是可以将上面两个属性合起来写的属性，

示例:

.container{
     flex-flow: row  wrap;
}

5. justify-content: 表示容器内部的子项目的水平对齐方式。而水平的对齐方式主要有六种: flex-start、flex-end、center、space-between、space-around、space-evenly。

如图所示：

flex-start：对应的对齐方式是水平向左对齐。（浏览器默认） flex-end：对应的对齐方式是水平向右对齐。 center：对应的对齐方式是居中对齐。 space-between： 对应的是，每个元素之间中间流出间隙是一样的，两边无间隙。 space-around：对应的是，每个元素周围的间隙是一样的，而不是元素之间的，因此，可以从途中看出两边的间隙会比中间小一半。 space-evenly：对应的是，每个元素之间的间隙大小一致。

使用示例:

    justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly

6. align-items: 表示容器内部的子项目的垂直方向上的对齐方式。在垂直方向上的对齐方式有5种：flex-start、flex-end、center、stretch(浏览器默认)、baseline。

如图所示：

flex-start: 对应的对齐方式是垂直向上对齐。 flex-end： 对应的对齐方式是垂直向下对齐。 center：对应的对齐方式是垂直居中对齐。 stretch：对应的对齐方式是将整个子项目的长度拉伸到最大块的高度(浏览器默认) baseline： 对应的对齐方式是子项目内部的文字基线对齐。

使用示例：

.container{
     align-items: flex-start || flex-end || center || stretch || baseline;
}

7. align-content: 表示在对行的情况下，每行所对应的垂直方向上的对齐方式。主要有六种对齐方式：flex-start、flex-end、center、stretch、space-between、space-around。

如图所示：

flex-start：对应的是每一行在垂直方向上向上对齐的方式 flex-end：对应的是每一行在垂直方向上向下对齐的方式 center：对应的是每一行在垂直方向上居中对齐的方式 stretch：对应的是每一行延展到铺满整个垂直方向。 space-between：对应的就是每行之间留有空隙，而两边没有空隙 space-around：对应的就是每行周围的空隙均相等

container的属性就是上述的7种，只要熟练的掌握这些属性，就能对整体容器进行一个基础的布局了。当然了，要改变内部子项目时，还得需要搞清楚子项目上面的几个属性。

下面，我们就来分析分析内部的子项目属性，可分为以下几个部分：

1. order：表示的是顺序，子项目的排列顺序。通常，默认情况下，子项目都是按照默认顺序进行排序的。但是，有时候你或许需要将后面的元素拿上来，那你就可以使用order这个属性，正如图中展示的：

在css中的使用为：

  order: <integer>  //如1

2. flex-grow：表示的是元素的所占空间的比例，在设置每个元素flex-grow为1时，一行内的子元素都是均分的，即1：1：1。但是，如果你给第一个元素设置flex-grow为2时，它们的比例就会变成2：1：1。如图：

在css中的使用：

flex-grow: <integer> /默认为0/

3, flex-shrink：表示子项目的伸缩

在css中的使用：

flex-shrink:  number  /*default to 1*/

4. flex-basis: 表示子项目的长度，默认为auto，即当设置flex-grow时，长度就为flex-grow的value，如果没有，就是块本身内容的大小。

在css中的使用：

flex-basis：<length> | auto   /*default auto*/

5. flex: 表示flex-grow、flex-shrink和flex-basis的集合写法，默认为0，1，auto

在css中的使用：

flex: <flex-grow> <flex-shrink> <flex-basis>

6. align-self：表示子项目在垂直轴线上的放置方式。

如图所示：

它的值也和align-items一样，flex-start、flex-end、center、stretch、baseline还有auto。默认为auto，即为容器的排列方式。

align-self: auto | flex-start | flex-end | center | stretch | baseline

总结

flex的一些基础内容基本上都已经总结完成了，但是对于flex布局的认识其实还应该更深入一点，这些都得从平时的练习当中来锻炼自己。

[laizimo]

A Complete Guide to flex layout

flexbugs

[fattypiggy]

你好，谢谢总结分享。

但是我想说你可能对main axis和cross axis那里说的有些问题。主轴和交叉轴不是固定的，不是所有情况下横轴都是主轴，纵轴都是交叉轴。

只有 flex-direction 没有设置或者设置为 row 或者 row-reverse 情况下，横轴才是主轴，然后你接下来的假设才是正确的，否则，就像你写的“5.justify-content: 表示容器内部的子项目的 水平 对齐方式。”

如果 flex-direction 设置为 column 情况下，那么你说的就是错误的，我觉得正确的解释应该是

justify-content: 表示项目在 主轴 的排列方式

相应的，align-items: 项目在 交叉轴 的排列方式

我最近在自己的博客(链接)上也总结了类似flex box的知识，希望可以互相学习，共同提高。

[Oneleven]

好的，谢谢指出～

William Jing notifications@github.com于2018年8月26日 周日12:50写道：

你好，谢谢总结分享。

但是我想说你可能对main axis和cross axis那里说的有些问题。主轴和交叉轴不是固定的，不是所有情况下横轴都是主轴，纵轴都是交叉轴。

只有 flex-direction 没有设置或者设置为 row 或者 row-reverse 情况下，横轴才是主轴，然后你接下来的假设才是正确的，否则，就像你写的“5.justify-content: 表示容器内部的子项目的 水平 对齐方式。”

如果 flex-direction 设置为 column 情况下，那么你说的就是错误的，我觉得正确的解释应该是

justify-content: 表示项目在 主轴 的排列方式

相应的，align-items: 项目在 交叉轴 的排列方式

我最近在自己的博客(链接 https://www.williamjing.com/2018/08/19/flex-box-styles-in-css.html)上也总结了类似flex box的知识，希望可以互相学习，共同提高。

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/laizimo/zimo-article/issues/13#issuecomment-416013863, or mute the thread https://github.com/notifications/unsubscribe-auth/AYeWwUbya1R3ZraY71ShrYUpHwugNg5Uks5uUij4gaJpZM4PC19J .