css3布局容器属性

flex概念

 flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，
 使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，
 方便适配不同大小的内容区域。flex不单是一个属性，
 还包含了一套新的属性集属性集包括设置容器和项目两部分

主轴与交叉轴

容器与项目元素

容器属性：flex-flow、flex-direction、flex-wrap、justify-content、
align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

弹性盒模型display:flex;
元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse

元素是否换行flex-wrap:nowrap（默认值）

项目元素在主轴上的对齐方式 （垂直居中）

项目元素在主轴上的对齐方式justify-content:flex-start（默认值）
flex-end | center |space-between | space-around | space-evenly

项目元素在主轴上的对齐方式（水平居中）

align-items:stretch（默认值） | center  | flex-end | baseline | flex-start

多行元素在交叉轴的对齐方式

 align-content:stretch（默认值） | flex-start | center |flex-end | space-between 
 space-around | space-evenly

flex-direction 属性

row（默认值）：主轴横向，项目沿主轴排列，从左到右排列
row-reverse：row的反方向，从右到左排列
column：主轴纵向，项目沿主轴排列，从上到下排列
column-reverse：column的反方向，从下到上排列

flex-wrap 属性

    nowrap、wrap、wrap-reverse

容器属性flex-flow

    相当于direction和wrap的集合
    flex-flow: row nowrap;/* 顺序排列且不换行 */
    flex-flow:row-reverse wrap;/* 反序排列且自动换行 */

justify-content 属性

   flex-start（默认值）：项目对齐主轴起点，项目间不留空隙
   center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离
   flex-end：项目对齐主轴终点，项目间不留空隙
   space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0
   space-around：与space-between相似
   space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距 

注意

   align-content与align-items比较类似，同时也比较容易迷糊。
   下面会将两者对比着来看它们的异同：
   首先明确一点：align-content会以多行作为整体进行对齐，容器必须开启换行。