flex布局

使用display:flex定义两个盒子

<div id="box-container">//flex容器
  <div id="box-1"></div>//flex项 需要排列的元素
  <div id="box-2"></div>
</div>

flex-direction的值可以为
row（默认值） 水平从左向右
row-reverse 水平从右向左
column 垂直从上到下
column-reverse 垂直从下向上

有说flex子元素不能完全充满整个flex容器，所以要经常设置子元素排列方式和间距,有如下值：
flex-start（默认值） 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐且间隔都相等
space-around 两侧间隔相等

对齐轴为交叉轴（于justify-content的轴垂直）
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:第一行文字的基线对齐
stretch:默认占满整个容器高度

默认情况下，flex会调整项目大小，把他们都塞在一起
flex-item的值有如下
nowrap(默认值) 不换行
wrap 行从上到下排 列从左到右排
wrap-reverse 行从下往上排 列从左往右排

如果所有元素的flex-shrink都为1，当空间不足时，都将等比例缩小
如果某个元素的flex-shrink为0，则空间不足时，他不缩小
如果一个为1，一个为4，则后者相比前者缩小4倍

与flex-shrink属性相反，flex-grow会在容器太大时做出调整
如果一个为1 一个为2 那后者比前者扩大2倍

定义在分配多余空间之前，项目占据的主轴空间。

flex:1 0 10px 等于
flex-grow: 1; flex-shrink: 0; flex-basis: 10px;
默认值为flex:0 1 auto

决定flex容器里项目的顺序

允许调整每个项目自己的对齐方式，而不是一次性设置全部
align-self会覆盖align-items的值 他的可选值跟flex-item相同