flex布局
有自身独立内核技术的浏览器：ie、谷歌、火狐、欧朋、苹果。
弹性盒子是 CSS3 的一种新的布局模式。
弹性盒子是css中第一个专门用来做布局的样式。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
父元素设置为弹性容器后，子元素就变为弹性子元素。
设置主轴方向
flex-direction: row|row-reverse|column|column-reverse
row（水平向右）、row-reverse（水平向左）、column（垂直向下）、column-reverse（垂直向上）
设置弹性子元素在主轴上的排列方式
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly
flex-start:居于起点对齐。
flex-end：居于终点对齐。
center：居中对齐。
space-between：保持每两个弹性子元素之间的距离相等。
space-around：保持每个弹性子元素的周围的距离一致。
space-evenly：保持弹性子元素之间及边界之间的距离一致（均匀排列）。
设置主轴在侧轴方向上的对齐方式
align-items: stretch|center|flex-start|flex-end
stretch：拉伸，要求元素在侧轴方向上没有明确尺寸。
center：居中。
flex-start:居于起点对齐。
flex-end：居于终点对齐。
设置弹性子元素超出主轴长度时是否换行及如何换行
flex-wrap: nowrap|wrap|wrap-reverse
nowrap：不换行（元素会被挤压）。
wrap：正向换行（顺着侧轴方向）。
wrap-reverse：反向换行。
设置多行状态下，多主轴在侧轴方向上的排列方式
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly
stretch：拉伸（align-items也是拉伸）。
center：居中。
flex-start:居于起点对齐。
flex-end：居于终点对齐。
space-between：保持每两个弹性子元素之间的距离相等。
space-around：保持每个弹性子元素的周围的距离一致。
space-evenly：保持弹性子元素之间及边界之间的距离一致（均匀排列）。
flex-flow
flex-flow 是flex-direction(主轴方向) 和 flex-wrap（主轴是否换行） 的简写
改变弹性子元素的出场顺序
order，为弹性子元素设置。
<div id="box">
<div style="order:2">A</div>
<div style="order:1">B</div>
<div style="order:3">C</div>
</div>
设置弹性子元素在侧轴方向上的对齐方式
用来覆盖align-items的统一设置的。
align-self: stretch|center|flex-start|flex-end
stretch：拉伸，要求元素在侧轴方向上没有明确尺寸。
center：居中。
flex-start:居于起点对齐。
flex-end：居于终点对齐。
设置弹性子元素在主轴方向上的尺寸
flex：允许扩张的最大值 允许收缩的最小值 当前值。
一般情况下，设置一个值，用来表示比例关系。
比宽高尺寸优先级更高。
flex布局技巧
块级元素绝对居中
除了传统方式（定位），flex可以很方便的办到：
#box {
width: 500px;
height: 500px;
border: 1px solid black;
margin: auto;
display: flex;/*设置外层元素为弹性盒子*/
justify-content: center;
align-items: center;
}
#my {
width: 100px;
height: 100px;
background-color: blanchedalmond;
margin:auto;
}
flex有两种方式可以办到：
1、设置外层元素为弹性盒子，当前元素设置margin:auto;。
2、设置外层元素为弹性盒子，当前元素设置justify-content: center;align-items: center;
