flexbox

css3里面引入了一种新的布局方式flexbox
通过给某个元素设置style {display: flex} 来指定该元素里面的所有子元素以flexbox方式来进行布局，该元素则称之为flex container。
该容器以main axis, cross axis为两个坐标轴来排列子元素。

Capture.PNG

• flex container 即 display:flex 修饰的元素
• flex item container 中包含的元素称为flex item
• main axis 元素按照该坐标方向排列
• cross axis 和main axis垂直的方向
• main start 主坐标轴的起始位置，main end 主坐标轴的结束位置
• cross start cross坐标轴的起始位置，cross end cross坐标轴的结束位置

flexbox可以通过如下属性来指定它的显示方式

• flex-direction: 元素排列方向，默认是横向，即.它有下面几个取值：
  ** row: 横向排列，从左往右排列
  ** row-reverse: 也是横向排序，但是是从右往左排列
  ** column: 纵向排列，即从上往下排列
  ** column-reverse: 纵向排列，但是是从下往上
• flex-wrap: 指定当一行元素排满时，是否自动换行/列，当设置value 为wrap时将自动换行
• align-items: 指定item相对于cross axis的位置
  ** center: 居中
  ** flex-start, cross axis的start
  ** flex-end, cross axis的end
• justify-content: 指定元素在主坐标轴上面的位置
  ** flex-start, flex-end, center和align-items里面的取值意思相同，只不过是相对于main cross
  ** space-around,延main axis等间距均匀分布
  ** space-between, 两边不留白，元素之间等间距分开

以上是对container的设置

• flex, 为对item的设置，来指定item所占空间的大小
  ** flex: 1 指定相对大小为1
  ** flex: 200px 指定具体所占空间为200px

更详细的信息参考mdn