Flex弹性布局其中以Webkit 内核的浏览器，必须加上-webkit前缀。容器默认存在两根轴：水平的主轴（main

一、Flex简介

Flex（ Flexible Box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、完整、响应式的实现各种网页布局的新方案；主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：

其中以Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
    display:-webki-flex;
    display:flex;
    
}

    注意：将元素设置成flex布局后，float、clear、vertical-align属性将失效

采用Flex布局的的元素，称为容器（Container），它的每一个子元素称为项目(Items)；容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、Flex基本属性表

-----	属性名称	属性含义	属性值
容器属性	flex-direction	决定项目在主轴上的排列方向	row(默认),row-reverse,column,column-reverse
	flex-wrap	决定项目是否换行	nowrap(默认),wrap,wrap-reverse
	flex-flow	direction与wrap的简写	row, nowrap(默认)
	justify-content	决定项目在主轴上的对齐方式	flex-start(默认),flex-end,center,space-around,space-between
	align-items	决定项目在交叉轴上的对齐方式	flex-start,flex-end,center,baseline,stretch(默认)
	align-content	决定多根主轴的对齐方式	flex-start,flex-end,center,space-around,space-between，stretch(默认)
项目属性	order	决定项目的排列顺序	值越小，排列越靠前，默认为0
	flex-grow	决定项目的放大比例	默认为0，即如果存在剩余空间，也不放大
	flex-shink	决定了项目的缩小比例	默认为1，即如果空间不足，该项目将缩小
	flex-basis	决定了项目在主轴上占据的空间	长度值，默认为auto
	flex	grow,shink,basis的简写	默认值为0,1auto
	align-self	决定单个项目独特的对齐方式	同align-items,多了一个auto可覆盖align-items

三、属性详情

容器属性详情

flex-direction：决定主轴的方向，即项目排列的方向
- 有四个可能的值：row(默认)|row-reverse|column|column-reverse
  - row:主轴为水平方向，项目沿主轴从左至右排列
  - column：主轴为竖直方向，项目沿主轴从上至下排列
  - row-reverse：主轴水平，项目从右至左排列，与row反向
  - column-reverse：主轴竖直，项目从下至上排列，与column反向
    
    row(水平)
    column（垂直）
flex-wrap:默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式
- 可能的值nowrap(默认)|wrap|wrap-reverse
  - nowrap：自动缩小项目，不换行
  - wrap：换行，且第一行在上方
  - wrap-reverse：换行，第一行在下面
    
    nowrap(默认)
    wrap
flex-flow: 是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列不换行。
justify-content:决定item在主轴上的对齐方式
- 可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为
  - flex-start：左对齐
  - flex-end：右对齐
  - center：居中对齐
  - space- between：两端对齐
  - space-around：沿轴线均匀分布
    
    flex-end
    center
    space-around
align-items:决定了item在交叉轴上的对齐方式
- 可能的值有flex-start|flex-end|center|baseline|stretch，当主轴水平时，其具体含义为
  - flex-start：顶端对齐
  - flex-end：底部对齐
  - center：竖直方向上居中对齐
  - baseline：item第一行文字的底部对齐
  - stretch：当item未设置高度时，item将和容器等高对齐
    
    flex-end
    center
align-content:该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。
- align-content可能值含义如下（假设主轴为水平方向）：
  - flex-start：左对齐
  - flex-end：右对齐
  - center：居中对齐
  - space- between：两端对齐
  - space-around：沿轴线均匀分布
  - stretch：各行将根据其flex-grow值伸展以充分占据剩余空间
    
    flex-start
    flex-end
    space-around