一、Flex 布局简介

咱来说说 Flex 布局哈，这就是弹性盒子布局，是 CSS3 里一种特厉害的布局办法。它能轻轻松松弄出各种复杂的布局效果，让元素变得有弹性，能适应不同的页面大小还有设备。IE10 以及更高的版本支持它，在移动端和那些现代浏览器里可流行啦。

Flex 布局意思就是 “弹性布局”，能给盒状模型提供最大的灵活性。随便哪个容器都能指定成 Flex 布局，行内元素也行。得注意哈，设成 Flex 布局以后，子元素的 float、clear 还有 vertical-align 属性就没用啦。

弹性容器就是包含着弹性项目的父元素，把 display 属性的值设成 flex 就能定义成弹性容器；弹性项目就是子容器。容器默认有两根轴：水平的主轴和垂直的侧轴。主轴开始的地方（跟边框的交叉点）叫 main start，结束的地方叫 main end；侧轴开始的地方叫 cross start，结束的地方叫 cross end。项目默认是沿着主轴排列的。单个项目占的主轴空间叫 main size，占的侧轴空间叫 cross size。

Flex 布局的基本属性分成容器上的和项目上的。容器上的属性主要有这些：

flex-flow 属性：.container {flex-flow: <flex-direction> || <flex-wrap>; 它默认的取值是 row nowrap}。flex-flow 就是 flex-direction 和 flex-wrap 的组合简写，用来定义弹性容器的主轴方向还有换行方式。

flex-direction 属性：.container {flex-direction: row | row-reverse | column | column-reverse;}。它能取的值有 row（这是默认值）：主轴是水平方向，起点在左边；row-reverse：主轴是水平方向，起点在右边；column：主轴是垂直方向，起点在上边；column-reverse：主轴是垂直方向，起点在下边。

flex-warp 属性：.container {flex-wrap: nowrap | wrap | wrap-reverse;}。nowrap（默认的）：不换行；wrap：换行，第一行在上面；wrap-reverse：换行，第一行在下面。

justify-content 属性：.container {justify-content: flex-start | flex-end | center | space-between | space-around;}。可能的取值有 flex-start（默认值）：左边对齐；flex-end：右边对齐；center：中间对齐；space-between：两边对齐，项目之间的间隔都一样；space-around：每个项目两边的间隔一样，项目之间的间隔比项目跟边框的间隔大一倍。

align-items 属性：.container {align-items: flex-start | flex-end | center | baseline | stretch;}。flex-start：交叉轴起点对齐；flex-end：交叉轴终点对齐；center：交叉轴中点对齐；baseline: 项目第一行文字的基线对齐；stretch（默认值）：要是项目没设高度或者设成 auto，就会占满整个容器的高度。

align-content 属性：.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}。这个属性可能的取值有：flex-start：跟交叉轴起点对齐；flex-end：跟交叉轴终点对齐；center：跟交叉轴中点对齐；space-between：跟交叉轴两边对齐，轴线之间的间隔平均分布；space-around：每根轴线两边的间隔都一样，轴线之间的间隔比轴线跟边框的间隔大一倍；stretch（默认值）：轴线占满整个交叉轴。

项目上的属性主要有：

flex 属性：flex 属性是 flex-grow，flex-shrink,felx-basis 三个属性的简写。要是属性值是 none 那就表示 0 0 auto，要是属性值是 1 或者 auto 那就表示 1 1 auto。

flex-grow 属性：规定项目的放大比例，默认是 0，就是说要是有剩余空间，也不放大。要是所有项目的 flex-grow 属性都是 1，那它们就等分剩余空间。要是有一个项目的 flex-grow 属性是 2，其他项目都是 1，那前者占的剩余空间就比其他项目多一倍。

flex-shrink 属性：规定了项目的缩小比例，默认是 1，就是说要是空间不够，这个项目就缩小。要是所有项目的 flex-shrink 属性都是 1，空间不够的时候，都等比例缩小。要是有一个项目的 flex-shrink 属性是 0，其他项目都是 1，那空间不够的时候，前者就不缩小。

flex-basis 属性：规定了在分配多余空间之前，项目占的主轴空间（main size）。浏览器根据这个属性，算一算主轴有没有多余空间。它默认值是 auto，就是项目本来的大小。它能设成跟 width 或者 height 属性一样的值，那项目就占固定空间。

align-self 属性：能让单个项目有跟其他项目不一样的对齐方式，可以盖住 align-items 属性。默认值是 auto，表示继承父元素的 align-items 属性，要是没有父元素，那就跟 stretch 一样。这个属性可能取 6 个值，除了 auto，其他都跟 align-items 属性完全一样。

二、Flex 的基本概念

容器和项目

用 Flex 布局的那个元素就叫 Flex 容器，它的子元素自己就变成了 Flex 项目。

容器默认有主轴和交叉轴，项目是沿着主轴排的。

主轴和交叉轴

主轴的方向是由 flex-direction 这个属性决定的，能是水平的或者垂直的方向，有四个能选的值。交叉轴是跟主轴垂直的，是用来让项目在垂直方向对齐的。

用 Flex 布局的那个元素就叫 Flex 容器，它的子元素自己就变成了 Flex 项目。

容器默认有主轴和交叉轴，项目是沿着主轴排的。

主轴的方向能是水平方向（从左到右是默认值 row，从右到左是 row-reverse），也能是垂直方向（从上到下是 column，从下到上是 column-reverse）。

交叉轴跟主轴是垂直的，要是主轴是水平方向，那交叉轴就是垂直方向，用来让项目在垂直方向对齐；要是主轴是垂直方向，那交叉轴就是水平方向。

三、容器的属性

flex-direction 决定主轴方向：flex-direction 有四个值，分别是 row（这是默认的，从左到右）、row-reverse、column（从上到下）、column-reverse。这里头，row 意思是主轴是水平方向，起点在左边；row-reverse 意思是主轴是水平方向，起点在右边；column 意思是主轴是垂直方向，起点在上边；column-reverse 意思是主轴是垂直方向，起点在下边。

flex-wrap 规定容器里的元素能不能换行：flex-wrap 有三个值，分别是 nowrap（默认的，不换行）、wrap（换行）、wrap-reverse（反向换行）。nowrap 就是说弹性容器是单行的，项目不会换行；wrap 就是说弹性容器是多行的，第一行在上面，项目要是溢出来了就换行；wrap-reverse 就是说弹性容器是多行的，第一行在下面，项目要是溢出来了就反向换行。

flex-flow 是 flex-direction 和 flex-wrap 的简写形式：flex-flow 其实用处不太大，建议把 flex-direction 和 flex-wrap 分开设置。它就是这俩属性的组合简写，默认值是 row nowrap。比如说，flex-flow: column wrap; 这就表示主轴是垂直方向，项目要是溢出来了就换行。

justify-content 是元素在主轴上的对齐方式：justify-content 有五个值，分别是 flex-start（左对齐或者上对齐）、flex-end（右对齐或者下对齐）、center（居中对齐）、space-between（两端对齐，项目之间的距离一样）、space-around（项目两边的距离一样，是两端距离的两倍）。flex-start 就是朝着行头紧紧挨着填满（左对齐）；flex-end 就是朝着行尾紧紧挨着填满（右对齐）；center 就是在中间紧紧挨着填满；space-between 就是两端对齐，在这一行上平均分布，项目之间的距离跟 main start、main end 两端对齐的时候一样；space-around 就是每个弹性盒子两边的间隔一样，项目之间的距离一样，项目跟 main start、main end 之间的距离是项目之间距离的一半。

align-items 是元素在交叉轴上的对齐方式：align-items 有五个值，分别是 flex-start（上面或者左边对齐）、flex-end（下面或者右边对齐）、center（中点对齐）、stretch（这是默认值，没设置高度或者设成 auto 的时候占满整个容器的高度）、baseline（按照元素的第一行文字的基线对齐）。flex-start 就是弹性盒子元素的纵轴起始位置紧紧靠着这一行的纵轴起始位置（起点对齐）；flex-end 就是弹性盒子元素的纵轴起始位置紧紧靠着这一行的纵轴结束位置（终点对齐）；center 就是弹性盒子元素在这一行的纵轴上居中对齐；baseline 就是弹性盒子元素的第一行文字的基线对齐；stretch 就是要是项目没设置高度或者设成 auto，就会占满整个容器的高度。

align-content 是多根轴线的对齐方式：要是只有一根轴线，这个属性就没用，有六个值跟 align-items 差不多。分别是 flex-start（跟交叉轴的起点对齐）、flex-end（跟交叉轴的终点对齐）、center（跟交叉轴的中点对齐）、space-between（跟交叉轴两端对齐，轴线之间的间隔平均分布）、space-around（每根轴线两边的间隔都一样，轴线之间的间隔比轴线跟边框的间隔大一倍）、stretch（轴线占满整个交叉轴）。

四、项目的属性

order 能设置项目在容器里的排列顺序，值越小就越靠前，默认值是 0 。通过设置 order 属性，能很容易地改变项目在弹性容器里的排列顺序。比如说，给一个项目设置的 order 值比较小，那它在容器里就会排在更靠前的位置；设置的值比较大，那就会排在更靠后的位置。要是想让某个 flex 子项在最前面显示，可以设置比 0 还小的整数，像 -1 就行。

flex-grow 是项目在主轴方向有剩余空间的时候的放大比例，默认是 0 ，就是不放大。flex-grow 属性规定了项目在主轴方向有剩余空间时的放大比例。要是是 0 ，就算有剩余空间也不会放大。当多个项目的 flex-grow 值不一样的时候，它们会按照比例来瓜分剩余空间。比如说，要是三个项目分别设置 flex-grow:1 、flex-grow:2 、flex-grow:3 ，剩余宽度的分母是 sum=1+2+3=6 ，那第一个项目分到的宽度就是 1/6600px=100px ，第二个项目分到的宽度就是 1/3600px=200px ，第三个项目分到的宽度就是 1/2*600px=300px 。

flex-shrink 是项目在主轴方向没有剩余空间时的缩小比例，默认值是 1 ，就是空间不够的时候会缩小，设置成 0 就不缩小。flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素只有在默认宽度加起来比容器大的时候才会收缩，收缩的大小得看 flex-shrink 的值。比如说，要是 A、B、C 设置 flex-shrink:1 ，D、E 设置为 flex-shrink:2 ，父容器定义成 500px ，子项被定义成 120px ，子项加起来就是 600px ，超过父容器 100px 。那超过的这 100px 就得让 A、B、C、D、E 来消化，通过收缩因子算一下，A、B、C 被去掉的溢出量大概是 14px ，D、E 被去掉的溢出量大概是 28px ，最后 A、B、C、D、E 的实际宽度分别是：120 - 14 = 106px 、120 - 14 = 106px 、120 - 14 = 106px 、120 - 28 = 92px 、120 - 28 = 92px 。

flex-basis 指示在分配多余空间之前项目占的长度，默认情况下是 auto ，也就是设置的 width 。flex-basis 属性指示在分配多余空间之前项目占的长度。它一开始的值是 auto ，这时候浏览器会检查元素有没有设置 width 属性值。要是有，那就用 width 的值当作 flex-basis 的值；要是没有，那就用元素内容本身的大小。要是 flex-basis 的值不是 auto ，width 属性就会被忽略。

flex 是 flex-grow 、flex-shrink 、flex-basis 这三个属性的简写，有两个快捷值：auto 和 none 。flex 属性是 flex-grow 、flex-shrink 、flex-basis 这三个属性的简写。当 flex 取值是 none ，那计算值就是 0 0 auto ；当 flex 取值是 auto ，那计算值就是 1 1 auto ；当 flex 取值是一个不是负数的数字，那这个数字就是 flex-grow 的值，flex-shrink 取 1 ，flex-basis 取 0% ；当 flex 取值是一个长度或者百分比，那就看成是 flex-basis 的值，flex-grow 取 1 ，flex-shrink 取 1 。

align-self 允许单个项目有跟其他项目不一样的对齐方式，可以盖住 align-items 属性。align-self 属性允许单个项目有跟其他项目不一样的对齐方式，可以盖住 align-items 属性。它能取六个值：flex-start 、flex-end 、center 、baseline 、stretch 、auto 。这个属性设置单独的排列行为，它的值的意思跟容器属性那部分差不多。

五、Flex 的实际应用

1. 开启 flex 就能实现项目水平排列的水平布局。

在 CSS 里，用 display: flex 就能把一个容器设成 Flex 布局，容器里边的子元素会自己变成 Flex 项目，然后沿着主轴水平排列。比如说：

.container {
  display: flex;

}

2. 右对齐和居中可以这么弄，把 justify-content 设置成 flex-end 就能实现右对齐，设置成 center 就能实现居中。

要是想把 Flex 布局里的子元素弄成右对齐，可以用属性 justify-content 来管主轴上的对齐方式。把 justify-content 设成 flex-end 就能实现右对齐，就像下面这样：

.container {
  display: flex;

 justify-content: flex-end;

}

要是想实现居中对齐，那就把 justify-content 设置为 center ：

.container {
  display: flex;

 justify-content: center;

}

3. 用 flex-wrap 能实现换行，用 align-content 能实现多行在交叉轴上的对齐。

要是想让 Flex 项目在容器里边换行显示，那就可以用 flex-wrap 属性。flex-wrap 有三个值，分别是 nowrap（这是默认的，不换行）、wrap（换行，第一行在上面）、wrap-reverse（反向换行）。比如说：

.container {
  display: flex;

 flex-wrap: wrap;

}

当项目换行之后，可以用 align-content 属性来设定多行在交叉轴上的对齐方式。要是项目只有一根轴线，这个属性就不管用啦。它有六个值跟 align-items 挺像的，像 flex-start（跟交叉轴的起点对齐）、flex-end（跟交叉轴的终点对齐）、center（跟交叉轴的中点对齐）、space-between（跟交叉轴两端对齐，轴线之间的间隔平均分布）、space-around（每根轴线两边的间隔都一样，轴线之间的间隔比轴线跟边框的间隔大一倍）、stretch（轴线占满整个交叉轴）。比如说：

.container {
  display: flex;

 flex-wrap: wrap;

 align-content: center;

}

4. 主轴和交叉轴的对齐方式能通过不同的属性设置，来达成项目在主轴和交叉轴上的各种对齐效果。

对于主轴的对齐，可以用 justify-content 属性，它有五个值，分别是 flex-start（左对齐或者上对齐）、flex-end（右对齐或者下对齐）、center（居中对齐）、space-between（两端对齐，项目之间的距离相等）、space-around（项目两边的距离相等，是两端距离的两倍）。比如说：

.container {
  display: flex;

 justify-content: space-between;

}

对于交叉轴的对齐，可以用 align-items 属性，它有五个值，分别是 flex-start（上面或者左边对齐）、flex-end（下面或者右边对齐）、center（中点对齐）、stretch（这是默认值，没设置高度或者设成 auto 时占满整个容器高度）、baseline（按照元素的第一行文字的基线对齐）。比如说：

.container {
  display: flex;

 align-items: center;

}

子元素能进行设置，能达成像子元素平分空间、特定子元素不占多余空间这类效果。

能够用 flex 属性来设置子元素在 Flex 布局里的表现。要是给子元素设置 flex: 1; ，那子元素就会平分剩余空间。比如说：

.container {
  display: flex;

}

.item {

  flex: 1;

}

要是想让特定子元素不占多余空间，可以把这个子元素的 flex-shrink 设置为 0 。比如说：

.container {
  display: flex;

}

.specific-item {

 flex-shrink: 0;

}

六、总结

Flex 布局在 CSS 里是特别厉害的一种布局方式，把它的基本概念和属性掌握住，就能轻轻松松达成各种复杂的布局要求，让页面布局变得更灵活、更高效。

通过这篇文章对 Flex 布局的介绍，咱们能瞧出来 Flex 布局在页面布局里有很大的优势。不管是简单的水平布局、右对齐和居中，还是复杂点的换行跟多行对齐、主轴跟交叉轴的对齐方式，还有子元素的各种设置，Flex 布局都能给出简单又有效的解决办法。

在实际用的时候，咱们能按照不一样的需求灵活地用 Flex 布局的各个属性。比如说，通过设置 display: flex 来开启 Flex 布局，达成项目的水平排列；用 justify-content 属性来实现右对齐和居中；靠 flex-wrap 和 align-content 来实现换行跟多行对齐；通过不同的属性设置来达成主轴跟交叉轴的对齐方式；还能对子元素进行特定的设置，像平分空间、特定子元素不占多余空间啥的。

反正，把 Flex 布局掌握好对前端开发者特别重要。它不光能提高开发的效率，还能让页面布局更好看、更灵活、更能自适应。希望