弹性盒子

概念：

          弹性盒布局模型（Flexble Box Layout）是css3规范中提出的一种新的布局方式。他可以用简单的方式满足很多常见的布局需求。

基本概念：

        采用flex布局的元素，称为flex容器，简称“容器”。他的所有子元素自动称为容器成员，称为flex项目，简称“项目”。

　　容器器默认存在两根轴：⽔水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start （主轴起始），

　　结束位置叫做 main end （主轴结束）；交叉轴的开始位置叫做 cross start （交叉轴起始），结束位置叫做 cross end （交叉轴结束）。
　　项⽬目默认沿主轴排列列。单个项⽬目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size

设置在容器器上的6个属性。

　　flex-direction
　　flex-wrap
　　flex-flow
　　justify-content
　　align-items
　　align-content

1 、flex-direction 属性
　　flex-direction ⽤用来确定主轴的⽅方向，从⽽而确定基本的项⽬目排列列⽅方向。
　　flex-direction 属性的取值及其含义：
　　row（默认值）：主轴为⽔水平⽅方向，起点在左端；
　　row-reverse：主轴为⽔水平⽅方向，起点在右端；
　　column：主轴为垂直⽅方向，起点在上沿；
　　column-reverse：主轴为垂直⽅方向，起点在下沿。

2 、flex-wrap属性
　　默认情况下，项⽬目都排在⼀条线上（⼜又称“轴线”）上。 flex-wrap 属性定义，如果⼀条轴线排不下，如何换⾏。
　　flex-wrap 属性的取值及其含义：
　　nowrap（默认值）：不不换⾏行行（强⾏行行挤压，平均分配宽度）；
　　wrap：换⾏行行，第⼀一⾏行行在上⽅方（从上往下⼀一次排列列）；
　　wrap-reverse：换⾏行行，第⼀一⾏行行在下⽅方（从下往上⼀一次排列列）；
　　说明：如果⾼高度固定，并且有多余空间，那么多余空间将会平均分配给每⼀一⾏行行的外边距。

3 、flex-flow
　　flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。
　　.box{ flex-flow: row wrap; }

4 、justify-content 属性
　　justify-content 属性定义了了项⽬目在主轴上的对⻬齐⽅方式。
　　justify-content 属性的取值及其含义：
　　（具体对⻬齐⽅方式与主轴的⽅方向有关。下⾯面假设主轴为从左到右。）
　　flex-start（默认值）：左对⻬齐
　　flex-end：右对⻬齐
　　center： 居中
　　space-between：两端对⻬齐，项⽬目之间的间隔都相等。
　　space-around：每个项⽬目两侧的间隔相等。所以，项⽬目之间的间隔⽐比项⽬目与边框的间隔⼤大⼀一倍。

5 、align-items 属性
　　align-items 属性定义项⽬目在交叉轴上如何对⻬齐。
　　align-items 属性的取值及其含义：
　　（具体对⻬齐⽅方式与交叉轴的⽅方向有关。下⾯面假设交叉轴为从左到右。）
　　flex-start：交叉轴的起点对⻬齐。
　　flex-end：交叉轴的终点对⻬齐。
　　center：交叉轴的中点对⻬齐。
　　baseline：所有⽂文字相对于同⼀一基线对⻬齐

6 、align-content 属性
　　align-content 属性定义了了多根轴线的对⻬齐⽅方式。如果项⽬目只有⼀一根轴线，该属性不不起作⽤用。
　　align-content 属性的取值及其含义：
　　flex-start：与交叉轴的起点对⻬齐。
　　flex-end：与交叉轴的终点对⻬齐。
　　center：与交叉轴的中点对⻬齐。
　　space-between：与交叉轴两端对⻬齐，轴线之间的间隔平均分布。
　　space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔⽐比轴线与边框的间隔⼤大⼀一倍。
　　stretch（默认值）：轴线占满整个交叉轴。

设置在项⽬目上的6种属性。

　　order
　　flex-grow
　　flex-shrink
　　flex-basis
　　flex
　　align-self

1 、order 属性
　　order 属性定义项⽬目的排列列顺序。数值越⼩小，排列列越靠前，默认为0。
　　.item:nth-child(3){
　　order:-1;
　　}

2 、flex-grow 属性
　　flex-grow 属性的值是⼀一个没有单位的⾮非负数，默认值为0。⽤用来定义项当容器器有多余的空间时，这些空
　　间在不不同条⽬目之间的分配⽐比例例。
　　.item{
　　flex-grow:1;
　　}
　　如果所有项⽬目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果⼀一个项⽬目的flex-grow属性为2，

　　其他项⽬目都为1，则前者占据的剩余空间将⽐比其他项多⼀一倍。

3 、flex-shrink 属性
　　flex-shrink 属性在使⽤用上类似于" flex-grow "。默认值为1。该属性的值也是⽆无单位的，表示的是当
　　容器器的空间不不⾜足时，各个项⽬目的尺⼨寸缩⼩小的⽐比例例。
　　.item{
　　flex-shrink:1;
　　}
　　如果所有项⽬目的flex-shrink属性都为1，当空间不不⾜足时，都将等⽐比例例缩⼩小。如果⼀一个项⽬目的flex-shrink属性为
　　0，其他项⽬目都为1，则空间不不⾜足时，前者不不缩⼩小。
　　负值对该属性⽆无效。

4、 flex-basis 属性
　　flex-basis 属性定义了了项⽬目占据的主轴空间⽐比例例。浏览器器根据这个属性，计算主轴是否有多余的空间。
　　它的默认值是auto，即项⽬目的本来的⼤大⼩小。
　　.item{
　　flex-basis:50%;
　　}
　　它可以设为跟 width 或 height 属性⼀一样的值（⽐比如350px），则项⽬目将占据固定空间。
5 、flex 属性
　　flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。
　　.item{
　　flex:none;
　　}　　
　　该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。
　　建议优先使⽤用这个属性，⽽而不不是单独写三个分离的属性，因为浏览器器会推算相关值。
6、 align-self 属性
　　align-self 属性允许单个项⽬目有与其他项⽬目不不⼀一样的对⻬齐⽅方式，可覆盖 align-items 属性。默认值
　　为auto，表示继承⽗父元素的 align-items 属性，如果没有⽗父元素，则等同于 stretch 。
　　align-self 属性的取值，除了了多⼀一个auto，其他都与 align-items 属性完全⼀一致。
　　flex-start：交叉轴的起点对⻬齐。
　　flex-end：交叉轴的终点对⻬齐。
　　center：交叉轴的中点对⻬齐。
　　baseline：所有⽂文字相对于同⼀一基线对⻬齐