理解 Flexbox：你须要知道这些

本文首发于个人博客，本文demo

flexbox 顾名思义 flexible box 弹性盒子，是 css3 中定义的一种新的布局方式。经过在某元素上使用 display: flex; 便可把该元素定义为 flex 容器 ( flex container )，而容器的全部子元素就是 flex 项目 ( flex item )。再介绍 flex 语法以前，先来看看一个重要的东西。

flex轴线

在 flex 容器里，存在两条轴，main axis 和 cross axis，又分别叫作主轴和交叉轴。主轴之因此叫作主轴而不叫作 x 轴，是由于主轴不必定是在水平线上的，也有多是垂直方向上，好比当 flex-direction: column; 的时候，主轴就是在垂直方向上。另外主轴和交叉轴都是有方向的，flex 项目就是沿着主轴方向进行布局。主轴默认方向是从左到右，交叉轴则是从上到下。

css3 里关于 flexbox 定义了2类的样式，分别是做用于 flex 容器上的和做用于 flex 项目上的。

flex容器

能做用到 flex 容器上的样式有这么几个：flex-direction，flex-wrap，flex-flow，justify-content，align-items 和 align-content。看到这么几个东西，别被它们吓坏了，多读几遍你就能猜个八九不离十它们是干吗用的了。下面咱们一一来介绍这些样式。

flex-direction

相信你也大概知道了这个样式的做用了，对了就是和方向有关的。flex-direction 这个样式就是用来控制 main axis 的方向的，默认值 row，表示水平从左到右。

• row，默认的属性值，水平方向，从左到右
• column，垂直方向，从上到下
• row-reverse，水平方向，从右到左
• column-reverse，垂直方向，从下到上

ul {
    display: flex;
    flex-direction: row; /* column || row-reverse || column-reverse */
}
复制代码

来一张图，你就更好理解了：

flex-wrap

flex-wrap 规定了 flex 项目在主轴上是按照一行仍是多行显示。

• nowrap，默认属性，单行显示，会尽力的压缩每一个 flex 项目直到恰好容下里面的内容，实在压缩不了的时候 flex 项目就可能会溢出容器。
• wrap，容许多行显示，当一行显示不下的时候，会变成多行显示。
• wrap-reverse，多行显示，且行的显示顺序是从下到上，即第一行显示在容器的底部。

ul {
    display: flex;
    flex-wrap: nowrap; /* wrap || wrap-reverse */
}
复制代码

flex-flow

flex-flow 是一个复合属性，是由 flex-direction 和 flex-wrap 组成的属性。若是只定义了一个属性，那么另一个属性取默认值。且属性书写顺序没有特别要求。

• row nowrap，这是默认属性值

ul {
    display: flex;
    flex-flow: row wrap;
}
复制代码

justify-content

justify-content 规定了 flex 项目在主轴的对齐方式。好比当 flex-direction 被设置为 column 时，justify-content 定义的是垂直方向上的对齐方式。

• flex-start, 默认属性值，flex项目将向着主轴起始位置对齐
• flex-end, flex 项目将向着主轴结束位置对齐
• center, flex 项目将在主轴上居中对齐
• space-between, flex 项目将在主轴上以相同的间距贴着轴的两端对齐
• space-around, flex 项目将在主轴上以相同的间距靠着两端对齐，且第一个头尾项目和轴的两端之间存在间距，间距是两个项目间距的一半

ul {
    display: flex;
    justify-content: center;
}
复制代码

align-items

竟然有主轴上的对齐方式，那么确定也有相关的属性是用来定义交叉轴上的对齐规则的。和 justify-content 同样，align-items 也有5个属性定义，其中 flex-start，flex-end 和 center 是同样的，就很少介绍了。来讲说两个不一样的：

• stretch，默认属性值，flex 项目在交叉轴上的尺寸若是没有指定或者是被设置为 auto，那么它将在这个方向上尽可能延伸，直到靠着容器边界，可是同时延伸的程度也会受到 max-height 或者 max-width 的影响
• baseline，flex项目在交叉轴上的对齐方式将是由每一个项目内容的基线决定

ul {
    display: flex;
    align-items: flex-start;
}
复制代码

align-content

理解了 justify-content 和 align-items 的对齐方式，再来看 align-content 就容易理解多了。它只做用于容器，且只能是存在多个行的容器。注意这里的行是相对于交叉轴来讲的。属性值有6个：flex-start，flex-end，center，stretch，space-between 和 space-around，这些对齐方式上面都介绍过了，大同小异。其中默认值是stretch。结合下图来加深理解：

ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around
}
复制代码

flex项目

上面介绍了定义在 flex 容器上的 css 属性，规范了整个容器里全部项目的全局呈现。这样不够灵活多变，不足以表现某些须要特别显示的项目，因此针对这一现状，w3c 社区又推出了一套做用于 flex 项目上的 css 属性。他们分别是：align-self，order，flex-grow，flex-shrink，flex-basis 和 flex 等 css 属性。

• align-self

align-self 规定了单个 flex 项目在交叉轴上的对齐方式，属性值能够是下面一个：flex-start，flex-end，center，stretch，baseline和 auto，其中 auto 为默认属性值，若是被设置为了 auto，那么该 flex 项目最终的对齐方式将是由容器的 align-items决定。

ul {
    display: flex;
}
ul li {
    align-self: center;
}
复制代码

order

order 定义了 flex 项目在容器里的排列顺序。取值能够是负整数、0、正整数，默认取值是0。数值越大越靠近轴向的末端，数值相同则按照 html 里的顺序排列。

ul {
    display: flex;
}
ul li {
    order: 2;
}
复制代码

flex-grow

flex-grow 规定了 flex 项目的伸展性，其值只能是 0 或者正整数，默认值是 0。若是一个 flex 项目同时设置了width 和值为正整数的 flex-grow 属性，则 width 属性将失效。取值若是是0表示不进行伸展；若是是正整数，则会进行伸展，且伸展的尺寸将和数值的大小有关，值越大，伸展得越大。伸展的具体计算数值是该项目占全部可伸展项目总和的比与这些全部可伸展项目占的尺寸的乘积。

flex-shrink

与伸展相对应的属性是 flex-shrink，定义了项目的收缩性，值也只能是 0 或者正整数，默认值是 1。若是是 0 表示不进行收缩，若是是正整数则表示进行收缩。若是一个项目同时显示设置了尺寸和收缩值为 1，那么该项目将进行收缩，定义的尺寸将失效。 项目可以进行收缩的前提是必须产生溢出，即全部项目所占尺寸之和必须大于容器尺寸。这个时候容器里全部可收缩的项目就须要经过收缩来消化掉这部分溢出的尺寸。而每一个项目具体的收缩量则由其设置的收缩比例决定，数值越大，收缩得越厉害。好比一个容器的尺寸是 400px，只有2个项目且尺寸都是 300px，收缩比例是 1 比 3，那么容器将溢出 200px，因此第一个项目须要收缩 50px，第二个项目须要收缩 150px，那么收缩完成后它们占据的尺寸分别是 250px 和 150px。

flex-basis

flex-basis 定义了项目在伸缩以前的初始尺寸，能够是长度设置（px、rem 和 em 等）；能够是用百分比基于父级来计算尺寸；也能够是默认的 auto，表示其尺寸由内容决定。除了 auto 外，若是尺寸溢出容器了，那么设置了 flex-basis 的项目间，则会根据每项设置的基准值，按比率伸缩剩余空间。

flex

flex 是一个复合属性，是由flex-grow、flex-shrink 和 flex-basis 组成的。

• flex-grow ，用来指定扩展比率，在 flex 属性中该值若是被省略则默认为1
• flex-shrink，用来指定收缩比率，在收缩的时候收缩比率会以伸缩基准值加权，在 flex 属性中该值若是被省略则默认为1
• flex-basis，用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布以前，表示尺寸的起始数值。在 flex 属性中该值若是被省略则默认为 0%。在flex属性中该值若是被指定为 auto，则伸缩基准值的计算值是自身的 width 设置，若是自身的宽度没有定义，则长度取决于内容。

一些缩写说明：

• flex: 1, 则其计算值为1 1 0%
• flex: auto, 则其计算值为1 1 auto
• flex: none, 则其计算值为0 0 auto
• flex: 0 auto 或者flex: initial, 则其计算值为0 1 auto

兼容性

flex 布局在现代浏览器中兼容性仍是比较使人满意的。能够去caniuse里看看，或者直接看这个用 flex 布局写的案例catty-music

参考文章

• 理解Flexbox：你须要知道的一切