弹性布局，css3中的flex属性，在布局中做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。
1.flex 布局的子元素不会脱离文档流
相比float来做布局，float属性的元素会脱离文档流，而且会涉及到各种BFC、清除浮动的问题
2.弹性盒子 子元素
** 弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器**。
子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
3.主轴和侧轴
主轴默认是水平方向，弹性盒子的子元素默认从左到右排列，子元素在没有宽度的情况下,会坍缩到内容的大小
可以通过flex-direction: 改变主轴方向
row
row-reverse
column
column-reverse
3.主轴的对齐方式
/* 向起始位置对齐
justify-content: flex-start; */
/* 向结束位置对齐
justify-content: flex-end;
/* 向行中间位置对齐
justify-content: center; */
/* 平均的分配到行里
justify-content: space-around; */
/* 第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。(常用)
justify-content: space-between; */
/* 子元素于子元素的距离完全相等
justify-content: space-evenly; */
4 侧轴单行元素的对齐方式
/* align-items(重点 针对的是单行) */
/* 元素在侧轴的起始位置对齐。
align-items: flex-start; */
/* flex-end： 元素在侧轴的结束位置对齐。
align-items: flex-end;
*/
/* center： 元素在侧轴上居中对齐。(常用)
align-items: center; */
/* 当没有设置宽度的情况下，将元素宽度拉伸至侧轴大小 */
5.侧轴单多行元素的对齐方式
/* 多行文本充满主轴，没法设置对齐方式
比如子元素设置成百分形式，充满轴 */
/* align-content是多行文本在侧轴的对齐方式 */
/* 各行向侧轴的起始位置堆叠。
align-content:flex-start ; */
/* 全部 各行向弹性盒容器的结束位置堆叠。
align-content: flex-end; */
/* 全部各行向弹性盒容器的中间位置堆叠。
align-content: center;
*/
/* 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
align-content: space-between;
*/
/* 在侧轴平均分布
align-content: space-around;
*/
6.元素换行
flex-direction: row; /* 元素装不下会自动坍缩，不会换行 */
flex-wrap: nowrap;/* 不换行 */
/* flex-wrap: wrap; 换行*/
7.flex属性
flex: 1(份数)
子元素通过设置flex属性达到分配弹性盒子空间的效果
实现自适应效果：
左边固定，右边自适应 左边盒子写宽高，右边盒子设置flex:1
右边固定，左边自适应 右边盒子写宽高，左边盒子设置flex:1
左右固定，中间自适应 左、右边盒子写宽高，中间盒子设置flex:1
补充1：让容器里的文字垂直水平对齐，
先flex父盒子，在设置justify-content:center;
align-items:center(单行) / align-content:center
补充2：骰子的四点制作
<div class="item">
<div class="info"></div>
<div class="info"></div>
</div>
<div class="item">
<div class="info"></div>
<div class="info"></div>
</div>
</div>
先给类four主轴为竖直方向，两个item两端对齐
.four {
border: 1px solid black;
display: flex;
flex-direction: column;
/* 在竖直主轴上两端对齐 */
justify-content: space-between;
}
再让item弹性，并且两端对齐
.four .item {
display: flex;
/* item里主轴仍是水平方向 */
/* 在水平主轴上两端对齐 */
justify-content: space-between;
}