flex布局

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

容器默认存在两根轴：

水平的主轴（main axis）和垂直的交叉轴（cross axis）。

项目默认方向是按照主轴排列的。

容器的属性：********************************************************************************************************************************************************************

1、flex-direction  

主轴的方向（即项目的排列方式）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

2、flex-wrap  

不管有多少项目，默认情况下，项目会排在一条直线上不换行！！！

    （1）flex-wrap默认值是nowrap 不换行

.wrapper{
    width:500px;
    display: flex;
    flex-wrap:nowrap;
    border:1px solid #000;
}
.box{
    width:100px;
    height:100px;
    background: #bb6d6d;
    margin-left:5px;
}

上边是六个宽度为100px的div，放在宽度为500px的盒子中，设置flex-wrap：nowrap（flex-wrap：nowrap是默认的，所以与不写效果是一样的），元素的宽度会被压缩。

    （2）flex-wrap：wrap 换行

.wrapper{
    width:500px;
    display: flex;
    flex-wrap:wrap;
    border:1px solid #000;
}
.box{
    width:100px;
    height:100px;
    background: #bb6d6d;
    margin:5px;
}

3、flex-flow  （此属性不常用）

flex-flow属性是flex-direction属性和flex-wrap属性的简写，默认值为：row  nowrap 

4、justify-content  

项目在主轴方向的对齐方式，一共有5个值（常用）

（1）flex-start  ( 默认值 ) ：左对齐

（2）flex-end :右对齐

（3）center：水平居中

（4）space-between：两端对齐，项目之间的间隔都相等

（5）space-around：每个项目两侧的间隔相等，所以每个项目之间的间隔比两侧的项目距离边框的间隔 大一倍

5、align-items

项目在交叉轴的对齐方式，一共有5个值（常用）

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

（2）flex-end :沿交叉轴的终点对齐

（3）center：在交叉轴方向居中

（4）stretch：当项目未设置高度 或者 设值为auto时，项目将占满整个容器的高度

（5）baseline：每个项目两侧的间隔相等，所以每个项目之间的间隔比两侧的项目距离边框的间隔 大一倍

项目的属性：********************************************************************************************************************************************************************

以下5个属性设置在项目上：

flex-grow : 项目的放大比例，默认值为0，如果存在剩余空间，也不放大

未加flex-grow属性的效果：

加flex-grow : 1 属性的效果：项目会平分剩余的空间

给单独项目加上 flex-grow : 2 ，此项目占的空间比其他项目多一倍！（ 比如：给第二个元素加上flex-grow：2 ）

.box:nth-of-type(2){
    flex-grow:2;
}

flex-shrink :项目的缩小比例，默认值为1，如果空间不足，该项目将缩小

.wrapper{
    width:200px;
    height:200px;
    display: flex;
    border:1px solid #000;
}
.box{
    flex-shrink:1;
    width:50px;
    height:50px;
    background: #bb6d6d;
    margin:5px;
}

如果一个项目为0，其他项目都为1，空间不足时，此项目不会缩放：（比如：给元素1单独设置flex-shrink：0，效果如下：）

.box:nth-of-type(1){
    flex-shrink:0
} 

上边只有元素一设置了flex-shrink：0 ， 所以只有元素一没有缩放。

flex布局各个浏览器支持情况：