dispaly:flex 主要用于容器中，也可以用在行内元素，可以响应式的实现页面布局
为盒子设置Flex布局之后，子元素的float, clear vertical-align属性会失效
flex的6个属性
- flex-direction可以让容器内元素的排列方向是横向的.
- flex-direction:row；水平从左到右排列
- flex-direction:row-reverse,水平从右往左排列
- flex-direction:column;垂直沿主轴从上向下垂直排列
- flex-wrap容器内元素是否换行（默认不换行）
- flex-wrap:nowrap(默认):一行水平均匀分布
- flex-wrap:wrap，盒子内第一个元素占第一行，那第二个就占第二行，还可以根据子元素的宽度决定一行几个
- just-content元素在主轴上的排列
- justify-content:center；元素在主轴居中排列
- justify-content:flex-start；如果是水平排列元素在主轴上从左到右，垂直排列从上到下
- justify-content:flex-end;如果是水平排列元素在主轴上从右到左，垂直排列从下到上
- justify-content:space-between.在左右两端或者上下两端，均匀排列
- justify-contnt:space-around.每个元素左右两侧间距相等，元素之间的监狱比边框之间的间距大一倍
- align-item元素在主轴当前行的对齐方式
- align-item:flex-start:紧靠父容器的上测
- align-item:flex-end:紧靠父容器的下侧
- align-item:center:父容器的侧轴居中放置
- align-conent容器内的元素没有占用交叉轴上所有可用的空间时，垂直对齐容器内的各项