关于flexbox布局

flexbox布局由伸缩容器和伸缩项目组成。父级是伸缩容器，子级是伸缩项目。

注意：flexbox目前还处于草稿的状态，所以使用flexbox布局的时候，需要加上各个浏览器的私有前缀，即-webkit、-moz、-ms、-o等。

本文为了书写方便，全部没有添加前缀，但是大家在使用时切忌不要忘记了前缀。

1.父级伸缩容器的属性

①display 属性用来指定元素是否为伸缩容器。必填。

   display:flex        形成块级容器

   display:inline-flex        形成行内容器

②flex-directin 属性是用于指定主轴的方向。

     flex-directin:row默认值，水平方向轴，子级从左向右排列。       

     flex-directin:row-reverse 水平方向轴，子级从右向左排列。

     flex-directin:column 垂直方向轴，子级从下向上排列。

     flex-directin:column-reverse 垂直方向轴，从下向上排列。

③flex-wrap 属性是用于在伸缩容器主轴线方向空间不足时，子级是否换行以及如何换行。(侧轴)

flex-wrap:nowrap默认值，不允许换行。

flex-wrap:wrap允许换行，换行方向为从上到下。

flex-wrap:wrap-reverse允许换行，换行放下为从下到上。

④flex-flow 属性是flex-directin（主轴） 加上 flex-wrap（侧轴）的缩写版本，默认为row nowrap。

例如：flex-flow:row wrap-reverse; 主轴水平，换行方向为从下到上。

⑤justify-content 属性来定义子级沿主轴线的对齐方式。

justify-content:flex-start默认值，子级向主轴线的起始位置靠齐。（从头开始）

justify-content:flex-end子级向主轴线的结束位置靠齐。（从尾开始，一般跟浮动到右边的效果是一样的）

justify-content:center子级向主轴线的中间位置靠齐。（一般跟居中是一样的效果）

justify-content:space-between子级会平均地分布在主轴线里。（第一个子级在主轴线的开始位置，最后一个子级在主轴线的终点位置）

justify-content:space-around子级会平均分布在主轴线里，两端保留一半的空间。

⑥align-items 属性是用来定义子级在伸缩容器（父级）里的交叉轴上的对齐方式。

align-items:flex-start; 子级向交叉轴（纵轴）的起始位置靠齐。

align-items:flex-end;子级向交叉轴（纵轴）的结束位置靠齐。

align-items:center;子级向交叉轴（纵轴）的中间位置靠齐。

align-items:baseline;子级根据基线对齐。

align-items:stretch;子级向交叉轴（纵轴）方向拉伸填充整个伸缩容器。子级被拉伸填充容器！

⑦align-content 调整子级换行后在交叉轴（纵轴）上的对齐方式。这个属性的前提是flex-wrap:wrap 一定要开启，而且要在出现换行的情况下才能看见效果。这里调整的其实就是子级换行之后每行之间的对齐方式。

align-content:flex-start默认值，子级向交叉轴（纵轴）的起始位置靠齐。

align-content:flex-end子级向交叉轴（纵轴）的结束位置靠齐。

align-content:center子级向交叉轴（纵轴）的中间位置靠齐。

align-content:space-between

align-content:space-around

align-content:stretch

box-flex:1.0; -webkit-box-flex:1.0;