Flexbox

背景

Flexbox 是一个CSS3新增的模块，主要可以用来方便地进行布局操作。

术语

container, 父容器

container指用于应用这个布局的容器，它的值应该为

.container {
  display: flex;
}

1. flex-direction: 指明了布局的方向，

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

包括了竖排还是横排，reverse就是做逆序排序。默认方向为从左向右，从上到下。

2.flex-wrap: 默认情况下，子元素会尽量排在一行，但是你也可以利用这个属性让其换行。

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

3.flex-flow: 这是flex-direction和flex-wrap的缩写形式,默认值为row nowrap

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

4.justify-content: 该属性主要用于控制子元素间空余空间的分布，适用于行分布的情况

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

这里给出各个属性值得意义：

5.align-items: 该属性控制子元素纵轴方向上排列方式

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

6.align-content: 该属性与justify-content类似，适用于多行内容的剩余空间分配情况

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

属性总结

这里其实你可以将flex-flow的相关属性看做是一条轴线(也是主轴main axis)，你用flex-direction来控制这条轴线的方向(横向或竖向)，而用flex-wrap来控制其子元素是否换行。而容器内的各个子元素将会沿着这条轴线进行排布。
另一方面，控制子元素布局方式的属性依据其轴线方向。主轴用justify-content,而纵轴方向用align-items和align-content，后者和水平justify-content类似，控制着每行子元素组之间的间距（可以认为行间距），而align-items就是控制子元素间的对齐方式的。

children，子元素

说完容器的属性，再来看一下子元素的属性。

1. order: 默认情况下元素之间的排列顺序是按照其在HTML文档中定义好的顺序进行排列的，不过可以通过这个属性对其进行更改。

.item {
  order: <integer>;
}

元素的数值会按自然数的排列顺序进行排序。

2.flex-grow: 这个属性控制元素的放大，默认值为0，不允许出现负数

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

容器内的各个元素大小是根据其比例进行计算的，如所有元素都是1，则元素大小就会均分，如果有一个是2，则这个元素就会比其他元素都大2倍。

3.flex-shrink: 与flex-grow类似，它是用来控制元素的缩小的，默认值为1，也是不允许出现负值。

4.flex-basis: 在分配容器剩余空间时会对元素基于此值先进行计算

.item {
  flex-basic: <length> | auto;
}

如果设置为0， 在内容去额外的空间不会被考虑进去，如果设置为auto，则额外的空间会基于flex-grow的值进行分配。

5.flex: 这是flex-grow和flex-shrink和flex-basis的缩写形式,默认值为0，1，auto

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

6.align-self: 这个属性值允许子元素复写容器的设置的align-items值。

.item {
  align-self: auto | flex-start| flex-end| center |baseline|stretch;
}

PS：设置了flex的子元素，float,clear和vertical-align对其都不会有作用。

属性总结

针对子元素之间的属性，主要是用来设置子元素的大小而排布顺序的。其中伸缩都会根据容器的轴线进行。这样就可以很容易实现等分，1：n：1之类的布局方式了。

举个栗子🌰

在这里，举一个简单的例子，利用flexbox可以很容易地解决绝对居中的布局问题，而且代码量很少。

居中布局

.parent {
  display: flex;
  height: 300px;
}

.child {
  width: 100px;
  height: 100px;
  margin: auto;
}

从上面代码可以看到，将父元素display的值设置为flex后，子元素的margin值设置为auto后就自动居中了，是不是很神奇呢？

参考文档

A Guide to Flexbox