知识来源：https://blog.csdn.net/cddcj/article/details/52131089
弹性布局?flex? 具有很方便的布局能力，但是部分浏览器对?flex 并不是很友好
1.指定flex布局
{
display:flex;
display: -webkit-flex; /* 兼容苹果的浏览器Safari */
}
行内元素?
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
2.容器属性
2.1、flex-direction： 项目的排列方向（橫or竖）
可以设置为：—》row 水平，左端
—》row-reverse 水平，右端
—》column 垂直，上沿
—》column-reverse 垂直，下沿
2.2、flex-wrap：? ?决定换不换行，默认一条线上
可以设置为：—》nowrap 不换行
? ?? ? —》wrap 换行
—》wrap-reverse 换行，第一行在下方
2.3、flex-flow： ?方向，换行
是flex-direction和 flex-wrap简写，默认row nowrap
2.4、?justify-content： 内部元素的对齐方式
可以设置为：—》justify-content: flex-start??左对齐
???—》flex-end 右对齐
? ? ? ? ? ?—》center?居中
? ? ? ? ? ?—》space-between? 两端对齐贴紧，项目间间隔相等
? ? ? ? ? ?—》space-around? 每个项目两两间隔相
2.5、align-items? ? ? ?定义项目在交叉轴上如何对齐
? —》align-items: flex-start
—》flex-end 交叉轴起点对齐?
—》center 交叉轴终点对齐(居中)
—》baseline 交叉轴中点对齐
—》stretch 项目第一行文字基线对齐
? ? ? ?默认值：未设或auto，将占满整个容器高度。
2.6、align-content? ? ? ?定义很多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。
? ? ? ? —》align-content: flex-start ?与交叉轴起点对齐
—》flex-end ?
—》center
—》space-between
—》space-around
—》stretch;
? ? ? ?默认值：轴线占满整个交叉轴。
??
2.7 box-orient? ? ? ? ?指定一个box子元素是否应按水平或垂直排列。
—》horizontal：水平（默认）
—》vertical：垂直
—》inline-axis：子元素沿内联坐标轴（映射到横向）
—》block-axis：子元素沿块坐标轴（映射到垂直）
?
==================================================================下面是复制的了。。
?
4.项目属性
? ??
? ? 。order：项目的排列顺序
? ? 。flex ??
? ? 。flex-grow ?放大比例
? ? 。flex-shrink 缩小比例
? ? 。flex-basis ?主轴空间大小
? ? 。align-self ?允许单个项目有与其他项目不一样的对齐方式
? ?
? ? 4.1 order 定义项目的排列顺序
? ? ? ? -》order: <integer>;
? ? ? ? 数值越小，排列越靠前，默认为0;
? ? 4.2 flex-grow?
? ? ? ? -》 flex-grow: <number>; /* default 0 */
? ? ? ? 项目的放大比例，默认是0，即若存在剩余空间，也不放大。
? ? ? ? flex-grow属性都为1，将等分剩余空间；
? ? ? ? flex-grow属性为2，其他都为1，则前者占据的剩余空间比其他项多一倍。
??
? ? ? ?
? ? 4.3 flex-shrink
? ? ? ? -》flex-shrink: <number>; /* default 1 */
? ? ? ? 项目的缩小比例，默认是1，即空间布局，该项目将缩小。
? ? ? ? flex-shrink属性都为1，将等比例缩小；
? ? ? ? 若一个项目flex-shrink属性为0，其他都为1，则空间不足时，设为0的不缩小。
?
? ? ? ? 负值对该属性无效。
? ? ?4.4 flex-basis
? ? ? ? ?-》flex-basis: <length> | auto; /* default auto */
? ? ? ? ?在分配多余空间之前，项目占据的主轴空间大小。默认为auto，即项目的本来大小。
? ? ? ? ?被省略为0%，零尺寸。
? ? ?4.5 flex
? ? ? ? ?-》flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
? ? ? ? ?flex属性是 flex-grow，flex-shrink，flex-basis缩写，默认为0 1 auto。
? ? ? ? ?后两个属性可选。
? ? ?
? ? ? ? ?该属性有两个快捷值：auto( 1 1 auto)和none( 0 0 auto)。
? ? ? ? ?建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
? ? ? ? ?
? ? ? 详细：其中<flex-basis>被省略默认为0%
? ? ? ? ? ? ? ? <flex-basis>指定auto，取决于自身<width>，若宽没定义，则长度取决于内容。
? ? ??
? ? ? ?flex:1 == flex: 1 1 0%; ?
? ? ? ?flex:none == flex:0 0 auto;
? ? ? ?flex:auto == flex:1 1 auto;
? ? ??
? ? ? ?例如：<div>
? ? ? ? ? ? ? ? ? ? <p id="p1">Hello</p>
? ? ? ? ? ? ? ? ? ? <p>Hello</p>
? ? ? ? ? ?
? ? ? ? ? ? ?</div>
? ? ? ? ? ? ?div{ width:300px; display:flex; }
? ? ? ? ? ? ?div #p1{ flex:1; }
? ? ? ? ? ? ? ?
?
? ? ? ?【flex:1 意思是设置后DIV有灵活的长度，即其余auto宽度后,?剩余的的都是flex:1它的】
? ? ? 4.6 align-self
? ? ? ? ? -》align-self: auto | flex-start | flex-end | center | baseline | stretch;
? ? ? ? ? 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 ?
??
?
二、兼容性方面
?
??/*父元素-横向排列（主轴）*/
? ? ?
? display:box; ?（伸缩盒最老版本）
? display:-webkit-box; ?/* iOS 6-,Safari 3.1-6 */
? display:-webkit-flex; /* Chrome */
? display:-moz-box; ? ? /* Firefox 19 */
? display:-ms-flexbox; ??
? display:flex; ?/*flex容器*/
?
/*方向*/
? -webkit-flex-direction: row;
? -moz-flex-direction: row;
? -ms-flex-direction: row;
? -o-flex-direction: row;?
? flex-direction:row; ? ?【新版本语法】
?
/*父元素-水平居中（主轴是横向才生效）*/【新版本语法】
? -webkit-justify-content: center;
? -moz-justify-content: center;
? -ms-justify-content: center;
? -o-justify-content: center;
? justify-content: center;
?
/*子元素-垂直居中（在侧轴、纵轴上）*/【新版本语法】
?-webkit-align-items:center;
?-moz-align-items:center;
?-ms-align-items:center;
?-o-align-items:center;
?align-items:center;
?
/*父元素-横向换行 */
? -webkit-flex-wrap: wrap;
? -moz-flex-wrap: wrap;
? -ms-flex-wrap: wrap;
? -o-flex-wrap: wrap;
? flex-wrap:wrap;
?
/* 子元素—平分比例 */?
?-prefix-box-flex: 1; /* old spec webkit,moz */
?-webkit-box-flex: 1; ? ? ?/* OLD - iOS 6-,Safari 3.1-6 */
?-webkit-flex: 1; ? ? ? ? ?/* Chrome */
?-moz-box-flex: 1; ? ? ? ? /* Firefox 19- */
?-ms-flex: 1; ? ? ? ? ? ? ?/* IE 10 */
?width:20%;
?flex: 1; ? ? ? ? ? ? ? ? ?/* NEW,?Opera 12.1,Firefox 20+ */
?flex: 2;
?
不写flex数值默认不可以伸缩。
?
/* 子元素-用于改变源文档顺序显示 */
?-prefix-box-ordinal-group: 1; /* old spec; must be positive */
?-webkit-box-ordinal-group: 2; ? ?
?-moz-box-ordinal-group: 2; ? ? ??
?-ms-flex-order: 2; ? ? ? ? ? ? ??
?-webkit-order: 2; ? ? ? ? ? ? ? ?
?order: 2; ? ? ? ? ? ? ? ? ? ? ? ?
?order: 3;
?
【老版本语法】
/*居中 */
box-pack:center; ?//水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;
/*子元素方向 */ ?-webkit-box-orient:horizontal; ?-moz-box-orient:horizontal; ?-ms-box-orient:horizontal;?-o-box-orient:horizontal;?box-orient:horizontal;
