弹性盒子属性介绍

什么是弹性盒子

弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。设置弹性盒子的属性是：display:flex|inline-flex
属性列表

属性	介绍
flex-direction	弹性容器中子元素的排列方式(主轴排列方式)
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 的简写
align-item	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐(行与行的对其方式)
justify-content:	设置弹性盒子元素在主轴（横轴）方向上的对齐方式

统一样式：

横向排列
flex-flow: row;
flex-flow: row;
flex-flow: row;
flex-flow: row;
flex-flow: row;

横向排列并换行
flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;
flex-flow: row wrap;

侧轴排列头部开始
1111
2222
3333
4444
align-items: flex-start

侧轴排列尾部开始
1111
2222
align-items: flex-end;