Flexbox（弹性盒子）是最新版本的 CSS（即 CSS3）中引入的一种强大且兼容性好的布局方法。使用 flexbox，我们可以很容易地处理好页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。
目录
1. flex-direction
2. justify-content
3. align-items
4. flex-wrap
5.flex-shrink
6. flex-grow
7. flex-basis
8. flex短方法属性
9. order
10. align-self
在一个元素的样式中添加 display: flex; 我们就可以开始接下来的操作嘞
1. flex-direction
给一个元素添加了 display:flex; 之后，他就变成了一个flex容器，然后可以让他的子元素排列成行或列，用到的是 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。 创建一行将使子项水平对齐，创建一列将使子项垂直对齐。
flex-direction 还有其他两个可选值： row-reverse(排成列并颠倒顺序) ，column-reverse；
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;}.b1 {width: 100px;height: 100px;background-color: pink;}.b2 {width: 100px;height: 100px;background-color: skyblue;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果是：
2. justify-content
使用justify-content属性对齐元素，flex子元素有时不会填满全部的容器，所以需要这个来告诉他要怎么排列，默认为flex-start
如果把 flex 容器设为一个行，它的子元素会从左到右逐个排列； 如果把 flex 容器设为一个列，它的子元素会从上到下逐个排列。 子元素排列的方向被称为main axis（主轴）。 对于行，主轴水平贯穿每一个项目； 对于列，主轴垂直贯穿每一个项目。
content：子元素在容器中居中排序flex-start（flex-end）：从 flex 容器的起始（终止）位置开始排列项目。 对行来说是把项目移至左边（右边）， 对于列是把项目移至顶部（底部）。space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。space-evenly，space-around：和space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;flex-wrap: wrap;justify-content: space-around;}.b1 {width: 100px;height: 100px;background-color: pink;}.b2 {width: 100px;height: 100px;background-color: skyblue;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果：
3. align-items
使用align-items属性对齐元素，Flex 容器中，与主轴垂直的叫做cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。stretch为默认值
align-items属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。
flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;flex-wrap: wrap;align-items: flex-start;}.b1 {width: 100px;height: 100px;background-color: pink;}.b2 {width: 100px;height: 100px;background-color: skyblue;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果：
4. flex-wrap
使用flex-wrap属性包裹，CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。 默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。
不过，使用flew-wrap属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
nowrap：默认值，不换行。wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;flex-wrap: wrap;}.b1 {width: 50%;background-color: pink;}.b2 {width: 50%;background-color: skyblue;}.b3 {width: 50%;background-color: red;}.b4 {width: 50%;background-color: yellow;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div></div></body>
得到的结果：
5.flex-shrink
使用flex-shrink属性定义flex子元素的收缩规则，使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。子元素的flex-shrink接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;}.b1 {width: 100%;background-color: pink;flex-shrink: 3;}.b2 {width: 100%;background-color: skyblue;flex-shrink: 1;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果：
6. flex-grow
使用flex-grow属性定义flex子元素的增长系数，使用之后，如果 flex 容器太大，则子元素会自动扩大。 当容器的宽度大于里面所有子元素的宽度之和时，所有子元素都会自动扩大。子元素的flex-shrink接受数值作为属性值。 数值越大，则该元素与其他元素相比会被扩大得更厉害
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;}.b1 {width: 25%;background-color: pink;flex-shrink: 3;flex-grow: 3;}.b2 {width: 25%;background-color: skyblue;flex-shrink: 1;flex-grow: 1;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果：
7. flex-basis
flex-basis属性定义了在使用 CSS 的flex-shrink或flex-grow属性对元素进行调整前，元素的初始大小。flx-basis属性的单位与其他表示尺寸的属性的单位一致（px，em，%等）。 如果值为auto，则项目的尺寸随内容调整。
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;}.b1 {height: 400px;background-color: pink;flex-basis: 100px;}.b2 {height: 400px;background-color: skyblue;flex-basis: 200px;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果：
8. flex短方法属性
flex-grow，flex-shrink，flex-basis 可以在flex中一并设置，顺序如前所述grow，shrink，basis
例如flex:1 0 10px； 就是把flex-grow设置为1，flex-shrink设置为0，flex-basis设置为10px；
9. order
使用order重新排列子元素，order属性告诉 CSS flex 容器里子元素的顺序。 默认情况下，项目排列顺序与源HTML 文件中顺序相同。 这个属性接受数字作为参数，可以使用负数。数值越小，排在越前面
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;}.b1 {height: 400px;background-color: pink;flex-basis: 100px;order: 2;}.b2 {height: 400px;background-color: skyblue;flex-basis: 200px;order: 1;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果：
10. align-self
flex 子项目的最后一个属性是align-self，这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。 因为float，clear和vertical-align等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。align-self可设置的值与align-items的一样，并且它会覆盖align-items所设置的值。
<style type="text/css">.b {width: 400px;height: 400px;display: flex;background-color: #ccc;flex-direction: row;}.b1 {height: 100px;background-color: pink;flex-basis: 100px;align-self: center;}.b2 {height: 100px;background-color: skyblue;flex-basis: 200px;align-self: flex-end;}</style><body><div class="b"><div class="b1"></div><div class="b2"></div></div></body>
得到的结果是：
