弹性布局：display：flex

1、flex的出现

网页布局是css的一个重要应用。布局的传统解决方案，基于盒模型，依赖于 display 属性、position 属性、float 属性。对于那些特殊的布局非常不方便，比如 垂直居中 就不容易实现。

所以提出了一种新的方案-flex布局，可以简便、完整、响应式地实现各种页面布局。

2、flex布局：display：flex；

任何一个容器都可以指定为flex布局

display:flex;

行内元素也可以使用flex布局

display:inline-flex;

注意：设为flex布局以后，子元素的 float、vertical-align、clear 属性将失效。

3、基本概念

容器：采用 flex 布局的元素，称为 flex 容器，简称“容器”；

项目：它的所有子元素自动成为容器成员，成为 flex 项目，简称“项目”；

容器默认存在两根轴：水平的主轴（main axis）、垂直的交叉轴（cross axis）；

主轴的开始位置（与边框的交点）叫做 mian start；结束位置叫做 main end；

交叉轴的开始位置叫做 cross start；结束位置叫做 cross end；

项目默认沿主轴排列（左对齐）。单个项目占据的主轴空间叫做 main size；占据的交叉轴空间叫做 cross size；

项目默认没有间隔（边距）；项目默认不改变项目宽度（即本来宽度）；项目默认改变项目高度（如果项目没有显式指定高度，就将占据容器的所有高度。）

4、容器属性（按工作中常用程度排列）

（1）项目在主轴的排列方式（默认左对齐、无间隔）

.box{
    display:flex;
    justify-content:flex-start;    /*-默认轴起点对齐-*/
    justify-content:flex-end;      /*-轴终点对齐-*/
    justify-content:center;        /*-居中-*/
    justify-content:space-between; /*-两端对齐-*/
    justify-content:space-around;  /*-均匀对齐（每个项目两侧间隔相等）-*/
}

（2）项目在交叉轴的排列方式（默认高度被拉伸）

.box{
    display:flex;
    align-items:stretch;    /*-默认值,如项目未设置高度或设置为auto,将占满整个容器的高度-*/
    align-items:center;     /*-垂直居中,不拉伸-*/
    align-items:flex-start; /*-交叉轴起点对齐-*/
    align-items:flex-end;   /*-交叉轴终点对齐-*/
    align-items:baseline;   /*-项目第一行文字的基线对齐-*/
}

（3）主轴的方向（默认水平方向从左到右）

.box{
    display:flex;
    flex-direction:row;            /*-主轴的方向,即项目的排列方向,默认水平方向,左对齐-*/
    flex-direction:row-reverse;    /*-主轴为水平方向，从右到左-*/
    flex-direction:column;         /*-主轴为垂直方向,从上到下-*/
    flex-direction:column-reverse; /*-主轴为垂直方向,从下到上-*/
}

（4）项目过多，如何换行

.box{
    display:flex;
    flex-wrap:nowrap;       /*-默认值,不换行-*/
    flex-wrap:wrap;         /*-换行,第一行在上方-*/
    flex-wrap:wrap-reverse; /*-换行,第一行在下方-*/
}

（5）flex-flow（主轴方向，如何换行的简写形式）

.box{
    display:flex;
    flex-flow:row nowrap;  /*-主轴方向为水平从左到右,项目过多不换行-*/
    flex-flow:column wrap; /*-主轴方向为垂直从上到下,项目过多换行,第一行在上方-*/
    …
}

（6）多根轴线的排列方式（如果项目只有一根轴线，该属性不起作用）

.box{
    display:flex;
    align-content:stretch;       /*-默认值,轴线占满整个交叉轴-*/
    align-content:flex-start;    /*-交叉轴的起点对齐-*/
    align-content:flex-end;      /*-交叉轴的终点对齐-*/
    align-content:center;        /*-交叉轴的中点对齐-*/
    align-content:space-between; /*-交叉轴两端对齐,轴线之间的间隔平均分布-*/
    align-content:space-around;  /*-每根轴线两侧的间距都相等-*/
}

5、项目属性（按照工作中常用程度排列）

（1）flex-grow 项目的拉伸比例

.box{
    display:flex;
}
.item{
    flex-grow:0;  /*-默认值,项目本来的宽度-*/
    flex-grow:1;  /*-如果项目flex-grow都为1,则等分剩余空间（如果有的话,因为有空间不足的情况）-*/
    flex-grow:1;  /*-如果其中一个项目flex-grow为1,其余为默认,则该为的项目占据剩余所有空间-*/
    flex-grow:2;  /*-如果其中一个项目flex-grow为2,其余为1,则该为2的项目空间是为1的2倍-*/    
}

（2）align-self 项目在交叉轴的上对齐方式

.box{
    display:flex;
}
.item{
    align-self:auto;    /*-默认值,继承容器垂直方向的对齐方式-*/
    align-self:stretch; /*-拉伸-*/
    align-self:flex-start flex-end center baseline; /*-可能值-*/
}

（3）align-basis 在分配多余空间之前，项目占据的主轴空间（main size）

     浏览器根据这个属性，计算主轴是否有多余空间

.box{
    display:flex;
}
.item{
    flex-basis:auto;  /*-默认值,项目本来宽度-*/
    flex-basis:100px; /*-数值、百分比,项目将占据固定空间-*/
}

（4）flex-shrink 项目的收缩比例（数值不能为负）

.box{
    display:flex;
}
.item{
    flex-shrink:1;  /*-默认值,项目本来大小-*/
    flex-shrink:1;  /*-项目该属性都为1，空间不足时将等比例缩小-*/
    flex-shrink:0;  /*-项目不收缩-*/
}

（5）order 项目的排列顺序

.box{
    display:flex;
}
.item{
    order:0; /*-默认值,数值越小,排列越靠前-*/
    order:-1 /*-该项目要排在order为0的项目前面-*/
}

（6）flex（flex-grow、flex-shrink、flex-basis 的简写形式）

.box{
    display:flex;
}
.item{
    flex:0 1 auto;  /*-默认值,不拉伸 可收缩 本来大小-*/
    flex:auto;      /*- 1 1 auto; 拉伸为1,可收缩,本来大小-*/
    flex:none;      /*- 0 0 auto; 不拉伸,不压缩,本来大小-*/
}