1.display:flex布局笔记

　　/*display:flex布局方式主要运用于垂直居中的效果*/

　　一、Flex译为Flexible Box（弹性盒子），任何一个容器都可以指定为Flex布局

　　注:设置为Flex布局之后，子元素的float，clear，vertical-align属性都失效

 .box1 {
   display : flex
 }
 .box2 {
   display : inline-flex
 }
 .box3 {
   display : -webkit-flex;
   display : flex
 }

　　二、基本

　　1.采用Flex布局的元素，称为Flex容器（flex container），简称"container"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"item"。

　　

　　容器中默认存在两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认沿主轴排列。单个子元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

　　三、容器属性

　　1.flex-direction（主轴方向，即子元素排列方向）

　　　　（1）row(默认) ： 主轴为水平方向，起点在左边

　　　　（2）row-reverse ： 主轴为水平方向，起点在右边

　　　　（3）column ： 主轴为垂直放方向，起点在上边

　　　　（4）column-reverse ： 主轴为垂直方向，起点在下边

　　　　（5）下图布局分别为 ： column-reverse、column、row、row-reverse

//HTML代码

 <div class="box">
     <div class="item">item</div>
     <div class="item">item</div>
     <div class="item">item</div>
 </div>

　　//CSS代码　　

 .box {
     display : -webkit-flex;
     disppaly : flex;
     margin-top: 10px;
     border:1px solid #333c44;
     -ms-flex-direction: row | row-reverse | column | column-reverse;
     -webkit-flex-direction: row | row-reverse | column | column-reverse;
     flex-direction: row | row-reverse | column | column-reverse;
 }

 .item {
    width: 100px;
     height: 100px;
     background: #f0ad4e;
     margin:10px;
 }

　　2.flex-wrap

　　（1）nowrap（默认）：item子元素不换行

　　（2）wrap ： item子元素换行，第一行在上边

　　（3）wrap-reverse ： item子元素换行，第一行在下边

//HTML代码

 <div class="wrap">
         <div class="wrap-item">item1</div>
         <div class="wrap-item">item2</div>
         <div class="wrap-item">item3</div>
         <div class="wrap-item">item4</div>
         <div class="wrap-item">item5</div>
         <div class="wrap-item">item6</div>
         <div class="wrap-item">item7</div>
 </div>

//CSS代码

 .wrap {
     width: 300px;
     border:1px solid #333c44;
     display: flex;
     display: -webkit-flex;
     flex-wrap: wrap | nowrap | wrap-reverse;
 }
 .wrap-item {
     width: 50px;
     height: 50px;
     background: #00a8f3;
     margin: 10px;
 }

　　3.flex-flow  ：< flex-direction> || <flex-wrap>， 两个属性的组合

//HTML代码

 <div class="flex-flow">
         <div class="flex-flow-item">item01</div>
         <div class="flex-flow-item">item02</div>
         <div class="flex-flow-item">item03</div>
         <div class="flex-flow-item">item04</div>
         <div class="flex-flow-item">item05</div>
 </div>

//CSS代码

 .flex-flow {
     border:1px solid #333c44;
     width:200px;
     display: flex;
     display: -webkit-flex;
     flex-flow:row（row-reverse | column | column-reverse） nowrap（wrap | wrap-reverse）;  /*两两组合*/
 }
 .flex-flow-item {
     width: 50px;
     height: 50px;
     background: darkkhaki;
     margin:10px;
 }

　　4.justify-content  ： flex-start | flex-end | center | space-between | space-around ，定义子元素项目在主轴水平方向上的对齐方式

　　　　（1）flex-start ： 左对齐

　　　　（2）flex-end  ： 右对齐

　　　　（3）center  ： 居中

　　　　（4）space-between  ： 两端对齐，子元素之间的距离相等

　　　　（5）space-around ： 每个子元素两侧的间隔相等

　　　　

//HTML代码

 <div class="justify-content">
         <div class="justify-item">item01</div>
         <div class="justify-item">item02</div>
         <div class="justify-item">item03</div>
         <div class="justify-item">item04</div>
         <div class="justify-item">item05</div>
 </div>

//CSS代码

 .justify-content {
     width: 800px;
     border:1px solid #333c44;
     display: -webkit-flex;
     display: flex;
     justify-content: flex-start | flex-end | center | space-between | space-around; /*默认为flex-start*/
 }
 .justify-item {
     width: 50px;
     height: 50px;
     background: gold;
     margin: 10px;
 }

　　5.align-items ： flex-start | flex-end | center | baseline | stretch ， 子元素在交叉轴（纵轴）方向上的对齐方式

　　　　（1）flex-start：交叉轴的起点对齐。

　　　　（2）flex-end：交叉轴的终点对齐。

　　　　（3）center：交叉轴的中点对齐。

　　　　（4）baseline: 项目的第一行文字的基线对齐。

　　　　（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

　　　　注 ： 将子元素的高度设置不同时才能显示下图效果

　　　　

　　6.align-content  ： flex-start | flex-end | center | space-between | space-around | stretch，设置多轴的对齐方式，如只有一根轴线则无效。
　　　　（1）flex-start：交叉轴的起点对齐。

　　　　（2）flex-end：交叉轴的终点对齐。

　　　　（3）center：交叉轴的中点对齐。

　　　　（4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

　　　　（5）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　　　（6）stretch（默认值）：轴线占满整个交叉轴。

　　　　

　　四、子元素属性

　　（1）order ： 数值，子元素的排列顺序，值越小越靠前（左或上）

　　　　

　　（2）flex-grow ： 定义子元素的占据比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

　　　　　　

　　（3）flex-shrink  ： 定义子元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效

　　　　　　　　

　　（4）flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

　　　　　　　　

　　（5）flex ： 复合属性（flex-grow | flex-shrink | flex-basis）组合

　　（6）align-self ： auto | flex-start | flex-end | center | baseline | stretch；

　　　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

　　　　该属性可能取6个值，除了auto，其他都与align-items属性完全一致。