flex布局知识点

1.flex布局

所谓的flex布局，即Flexible Box，弹性布局。兼容ie10以上的浏览器。
要注意的是，一旦容器设置了弹性布局，子元素的float、clear和vertical-align属性将失效。
使用弹性布局，首先必须有一个容器，文档中全部设置display:flex或者display: inline-flex;的元素，都是一个flex布局的容器，该容器里面的第一层元素，就是改容器的flex-items;
容器默认有两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）；

**容器有6个属性：**分别是flex-flow,flex-direction,flex-wrap,justify-content,align-items,align-content

1. flex-wrap
   flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。。
   这里要注意：如果容器设置了flex-wrap:nowrap;但是子元素的宽度加起来有大于容器的宽度，最终显示的时候，会按照元素各自的宽度跟子元素的宽度总和*容器宽度来显示。

2. flex-direction
   flex-direction: row|row-reverse|column|column-reverse|initial|inherit;是项目的排列方向。

3. flex-flow
   flex-flow: flex-direction flex-wrap|initial|inherit;是 flex-direction 和 flex-wrap 属性的复合属性。

4. justify-content
   justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
   用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

5. align-items
   align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
   属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。如下图；
   

6. align-content
   align-content：stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
   用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。即对flex-wrap:wrap;的容器有效，他会把所有子容器的内容在主轴方向居中；如下图；
   
   项目得6个属性：
   1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
   2.flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

1.  flexbox容器内剩余空间remained_space。

2.  获取flexbox容器中有flex-grow属性的子元素，算出flex-grow的总和grow_total。

3.  Flex-grow=0的元素默认按原大小显示。

4.  Flex-grow>0的元素，宽度=原宽度+ flexgrow/grow_total*remainded_space。

3.flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

收缩值计算
最终显示宽度或者高度=flex-basis-((flex-shrink*flex-basis)/(各个项目的flex-shrink*flex-basis的总和)*总超出空间)

4.flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6.align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。align-self: auto | flex-start | flex-end | center | baseline | stretch;