传统的布局方式

传统的布局中我们一般会去使用如下方式达成我们想要的效果：

float + clear
position relative + absolute
display inline-block
负margin

这些布局可以任意组合来达成我们想要的效果，但是也增加了难度。比如说垂直居中就没有那么容易实现

一种更灵活的布局方式

我们使用flex布局一般会通过给一个容器设置display: flex将其变成flex容器，内部的元素就成了容器成员。
我们先来看一张图片

图中的flex-container就是容器，包裹着的两个flex item也就是内部成员。
两道红线就是主轴与侧轴，主轴的默认方向是从左到右，侧轴是从上到下，各自都有自己的起点与终点。并且主轴和侧轴的方向可以改变，起点和终点也随之更改。

容器的属性

display

设置flex-container

.container {
  display: flex; /* or inline-flex */
}

4个flex item自动的排在了一行

flex-direction

row: 默认主轴方向从左到右，起点在左端
row-reverse: 主轴方向从右到左，起点在右端
column: 主轴方向从上到下, 起点在上端
column-revers: 主轴方向从从下到上，起点在下端

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

flex-wrap

nowrap: 默认不换行
wrap: 当容器宽度无法满足子元素时让子元素换行显示
wrap-reverse: 换行并且颠倒顺序

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

flex-flow

是flex-direction和flex-wrap的缩写，默认值是row和nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

主轴的对齐方式 flex-start: 默认左对齐 flex-end: 右对齐 center: 居中 space-between: 两端对齐 space-around：元素均匀分布

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

align-items

侧轴对齐方式 flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。
stretch（默认值）：轴线占满整个交叉轴。如果子元素未设置高度

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

最后一张图由于我加上了margin: 10px所以未填满整个高度

item的属性

flex-grow

定义item的放大比例，默认为0，那么有剩余空间也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink

定义item的收缩比例，默认为1，那么空间不足将收缩。如果为0，那么其他项目都为1的情况下该项目不收缩。

.item {
  flex-shrink: <number>; /* default 0 */
}

flex-basis

定义了item在分配多余空间之前的占据主轴的尺寸。默认值为auto，即item本身的大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex

该属性是flex-grow和flex-shrink以及flex-basis的缩写，建议优先使用此属性而不是以上属性单个使用，方便浏览器计算相关值。

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

align-self

此属性是定义自身在侧轴的对其方式，可覆盖父容器的align-item。

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

order

定义了item的排列顺序，数值小的在前面，默认值为0，也可以为负数。

.item {
  order: <integer>;
}

最后

我们通过flex布局只需要三行代码就可实现完美居中。

.container {
  display: flex; //设置flex容器
  justify-content: center; //主轴对其方式居中
  align-items: center; //侧轴对其方式居中
}

简单聊一聊Flex布局常用的属性