Flex 布局基础
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。Webkit内核的浏览器，必须加上-webkit前缀。
html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="flex">
<p>flex布局</p>
<p>很好很好很好很好很好很好很好</p>
<p>大水法的萨菲阿斯顿发第三方爱的说法对方阿斯蒂芬阿迪所发生的阿斯蒂芬</p>
</div>
</body>
</html>
css
.flex p{
width:150px;
border:3px solid #444;
background:#ccc;
padding:5px;
margin:5px;
}
.flex{
display: flex; /*inline-flex*/
flex-direction:row-reverse;
/*row ： 设置从左到右排列
row-reverse ： 设置从右到左排列
column ： 设置从上到下排列
column-reverse ： 设置从下到上排列*/
flex-wrap: wrap;
/*nowrap ： 默认值，都在一行或者一列中显示
wrap ： 伸缩项目无法容纳时，自动换行
wrap-reverse ： 伸缩项目无法容纳时，自动换行，方向和wrap相反*/
flex-flow: row wrap; /*flex-flow 属性是 flex-direction 和 flex-wrap 属性的速记属性。*/
justify-content:flex-end;
/*flex-start ： 伸缩项目以起始点靠齐
flex-end ： 伸缩项目以结束点靠齐
center ： 伸缩项目以中心点靠齐
space-between ： 伸缩项目平均分布
space-around ： 伸缩项目平均分布，但两端保留一半的空间*/
align-items: stretch;
/*flex-start ： 伸缩项目以顶部为基准，清理下部的额外空间
flex-end ： 伸缩项目以底部为基准，清理上部的额外空间
center ： 伸缩项目以中部为基准，平均清理上下部的额外空间
baseline ： 伸缩项目以基线为基准，清理额外的空间
stretch ： 伸缩项目填充整个容器，默认值*/
align-content: flex-start;
/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。*/
}
p:nth-child(1){
flex: 1; /*flex 属性用来控制伸缩容器的比例分配。*/
}
p:nth-child(2){
flex: 3; /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。*/
/*order:0; 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
align-self:center; /*align-self 和align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和align-itmes 一致。*/
/*flex-grow:0; 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/
/*flex-shrink:1; 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-shrink=0不缩小*/
flex-basis: 100px; /*它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/
}