Flex布局详解

现如今前端使用最多的布局方式，要数flex布局。以往的布局多是使用position、float等属性来控制，且不说比较繁琐，还容易造成其他问题，比如使用浮动时就需要处理塌陷等问题。而flex布局旨在灵活，可以很容易达到垂直居中、两边对齐等这种效果的布局。所以本文特意记录一下flex布局的使用和注意点，也方便自己使用过程中解惑

基本概念

flex布局也就是弹性布局，首先了解一个概念——容器。何为容器，其实很容易理解，就是使用了flex布局的元素。如果一个元素的样式中设置了布局方式为flex，则这个元素就可以称为一个容器，而容器中的元素则称为项目。在容器中，默认含有两根轴线，水平方向的称为主轴，垂直方向的称为交叉轴。项目默认是沿着主轴来排列的。
需要注意的是，主轴不是绝对的，比如垂直方向轴线也可能成为主轴（后面会介绍到），以上提到的均为默认情况。

基本使用

flex布局的使用十分简单，只要要在对应的元素的样式中设置display属性为flex即可，代码如下：

/* 块级元素 */
.element {
  display: -webkit-flex; /* Safari */
  display: flex;
}
/* 行内元素 */
.element {
  display: inline-flex;
}

设置之后对应的元素就成为了容器

容器的常用属性

容器本身含有很多属性，可以在对应在容器的样式表里去设置，下面来一一介绍

flex-direction

表示主轴的方向，默认是水平向右，即row，通过这个属性可以把主轴设置到垂直方向上(开头特意提到的)。使用方式以及可能的取值如下：

.element {
  flex-direction: row | row-reverse | column | column-reverse;
}

对应的效果如图

flex-wrap

默认情况下项目都是排在主轴上，而flex-wrap属性可以指定当一条轴线排列不下时如何排列。使用方式以及可能取值如下：

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

三个值对应的效果分别为：

• nowrap：不换行（默认情况）
• wrap：排列不下时换行，且多余的排在下一行
• wrap-reverse：排列不下时换行，且多余的排在上一行

flex-flow

综合属性，是flex-direction属性和flex-wrap属性的简写形式，使用方式如下：

.element {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

该属性用于定义项目在主轴上，也就是水平方向(默认情况)的对齐方式，使用方式以及可能的取值如下：

.element {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

效果分别如图：

以上均为默认主轴的情况

align-items

该属性定义项目在交叉轴上是如何对齐的，也就是在垂直方向上(默认情况)是如何对齐的，使用方式以及可能取值如下：

.element {
  align-items: flex-start | flex-end | center | space-between | space-around;
}

各取值效果如下：

需要注意的是，不设置该属性情况下，默认取值为stretch，项目本身如果未设置高度或者设置为auto时会被拉伸至和容器一样的高度。

align-content

该属性定义多根轴线存在情况下轴线的对齐方式，可以这样理解，即布局中存在多行情况时，每一行都有一根轴线，多根轴线的对齐方式，也就是多行时各行的对齐方式，可能的取值如下：

.element {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

每种取值效果这里不再次列举，可以参考上面align-items以及justify-content，只不过替换成多行的情况。

以上就是可以在容器样式中设置的属性

项目的常用属性

容器属性可以控制所有项目的一个整体排列，而项目属性则可以控制自身的特殊排列需求，具体介绍如下：

order

该属性可以定义项目的排列顺序，数值越小，排列则越靠前(默认主轴情况下，其他情况可以总结为越靠近起点)，默认情况为0，也可以为负值，使用方式如下：

.item {
  order: <integer>;
}

flex-grow

该属性定义项目的放大比例，默认为0，即不放大。这个放大比例，实际上指的不是自身放大的比例，而是当存在剩余空间时，对于剩余空间的一种分配比例，为0则不分配剩余空间。使用方式如下：

.item {
  flex-grow: <number>;
}

举例说明：若存在三个项目，分别设置该属性为1，2，1，且不设置大小，显示情况将如下

flex-shrink

该属性可以定义项目的缩小比例，默认为1，即当空间不足时，项目会等比例缩小。当这个值为0时，则表示不缩小。需要特别注意的是，这里的缩小比例，实际上指的是对于溢出空间的一个分配比例，最后显示的大小会是各自原本大小减去这个分配比例大小。该属性用方法和flex-grow一致，以下给出举例说明：
若存在三个项目，每个项目为500px，容器大小也为500px。分别设置该属性为1，2，1，背景色分别设置为蓝、红、黄，则最后显示情况如下：

由例子可算出溢出空间为1000px(500*3-500)，根据属性比例，各项目分配到的距离分别为250、500、250，然后各自减去这个距离后，就会得到这个显示结果

flex-basis

该属性可以定义在分配多余空间之前，项目占据主轴的空间大小，即宽度。浏览器会先考虑计算这个属性值，再去计算是否有多余空间。使用方式如下：

.item {
  flex-basis: <length> | auto; /* 默认值是auto */
}

当设置为默认值auto时，即表示项目原来的大小

flex

综合属性，是flex-grow, flex-shrink 和 flex-basis的简写，使用方式如下：（该属性比较常用）

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

该属性可以定义单个项目的对齐方式，可以覆盖掉align-items的值，默认为auto，即和align-items一致，使用方式如下：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;<'flex-basis'> ]
}

总结

以上就是flex布局的用法以及详解，好记性不如烂笔头，希望自己记不住的时候能来多看看多写写

参考资料

感谢阮老师的分享，相关链接如下
Flex布局教程