聊聊CSS的Flexboxs吧

随着各大浏览器开始支持CSS3的新属性，比如flexbox。flexbox号称可以将我们从css tricks里面解放出来，比如说垂直居中。当然，flexbox正朝着这个目标前进着，但首先是很好的使用它。在接下来的文章里面会用gif动图来解释布局，这样我们可以更好地理解和使用它。

flexbox内置的规则可以让我们在整体布局更加的灵活跟直观，它让父容器来决定如何展示子类div，包括它们的大小以及相互的间距。听起来是不是很神奇，那就让我们来实操吧。

在这篇文章中我们仔细讨论flexbox的5个常用属性以及属性值。

属性一： Display: Flex

你可以发现有4个不同形状，不同颜色的div被包裹在一个灰色的container里面，每个div默认展示display:block，每个小盒子都会占据一行。

现在你可以将外层包裹的container添加属性，代码如此简单

1
2
3

#container {
    display: flex;
}

是不是很神奇，所有的小盒子都好像添加了一个display：inline-block的属性，那就对了。事实是你做的远不止这一点，你给了container一种叫做flex环境，
你现在可以开始操作div的位置了，相比于传统的css更少的代码。

属性二： Flex Direction

一个Flexbox container有两个轴，横轴(main axis)和纵轴(cross axis)，如下图所示。

默认情况下，div会沿着横轴排列，从左至右，这也就是为什么一开始给container添加属性后，子类div会这样排列。但是Flex-direction会让你来控制div的排列方向。

#container {
    display: flex;
    flex-direction: column;
}

非常需要注意的地方是当你使用flex-direction: column后，子类div会按照纵轴来排列，从横轴转为纵轴排列。flex-direction还有其它几个属性值，比如row-reverse和column-reverse.

属性三： Justify Content

Justify-content控制盒子在横轴上的展示，让我们看看下面的图片

#container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

justify-content:一共有5个属性值

Flex-start
Flex-end
Center
Space-between
Space-around

在这里需要重点强调一下space-around和space-between, 在gif图中对比我们可以理解为，当属性值为space-around时, 子类每个div的左右间距都相等, space-between的情况下, 简单来说。就是每个盒子都有自己的个性.
还记得justify-content是作用在横轴上面的，如果需要作用在纵轴上，你会想当然把flex-direction改成column不就完事儿了么，答案是否定的，这就是接下来我要介绍的属性

属性四： Align Items

如果你掌握了justify-content的精髓，那align-items就是小菜一碟.justify-content是作用在横轴, 那么align-items就是作用在纵轴

align-items有5个属性值

flex-start
flex-end
center
stretch
baseline
相比于justify-content，还是有那么一点不一样的，仔细看下图

注意align-items: stretch 我已经对所有盒子的高度设定为auto
对于属性值为baseline时，要注意段落标签它会以盒子的最低靠齐.

为了更加直观和全面的理解，请看下图
属性五： Align Self
Align-self允许手动的对某个元素进行控制，
1
2
3
4
5
6
7
#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.