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

术语

container, 父容器

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

1
2
3

.container {
  display: flex;
}

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

1
2
3

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

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

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

1
2
3

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

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

1
2
3

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

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

1
2
3

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

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

属性值	作用
flex-start(默认)	子元素尽量向头部靠拢
flex-end	子元素尽量向尾部靠拢
center	子元素居中
space-between	子元素平均分布，首元素在头部，尾元素在尾部
space-around	子元素平均分布，各个元素两端都有相等的空余空间

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

1
2
3

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

属性值	作用
flex-start	子元素`margin`边缘处于容器上边缘
flex-end	子元素`margin`边缘处于容器下边缘
center	子元素垂直居中
baseline	子元素基线对齐
stretch(默认)	子元素收缩去填充容器，但仍然受`min-width`和`max-width`影响

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

1
2
3

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

属性	作用
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文档中定义好的顺序进行排列的，不过可以通过这个属性对其进行更改。

1
2
3

.item {
  order: <integer>;
}

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

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

1
2
3

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

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

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

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

1
2
3

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

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

属性值	作用
auto(默认)	根据元素的宽高属性进行计算
content	根据元素内的内容
	可以是百分比，rem等

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

1
2
3

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

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

1
2
3

.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

详解弹性盒Flexbox