flex弹性盒模型基础知识

基本应用：
1.可以实现左侧固定右侧自适应；
2.可以实现两侧固定中间自适应；
3.可以实现右侧固定左侧自适应；
4.可以触发BFC；
5.可以实现水平垂直居中；
6.可以实现响应式设计；

注意：父元素使用flex布局，子元素的float clear vertical-align等属性会失效。

一、常见父元素设置的属性

flex-direction 设置主轴方向。

flex-direction：
row / row-reverse / column / colum-reverse

justify-content设置主轴上的子元素排列方式

justify-content：
1.  flex-start；居中对齐；
2.  flex-end；居右对齐；
3.  center; 居中对齐；
4.  space-around；分配剩余空间
5.  space-between；左右贴边 在平均分配；

flex-wrap用作换行。默认情况下盒子都是不换行的。
```
flex-warp:
1. nowarp；不换行
2. wrap；换行。
```

align-items设置侧轴上子元素的排列方式；(适合单行)

align-items:
1.center(最常用)
2.flex-end
3.flex-start
4.stretch

align-content设置侧轴上子元素的排列方式（只用于多行）

align-content：
1.align-content：
2.flex-start;居左对齐
3.flex-end;居右对齐
4.flex-center；居中对齐
5.space-around配剩余空间；
6.stretch;延展
7.space-between;上下贴边 再平均分配剩余部分（重要）.

flex-flow是flex-direction和flex-wrap的简写.

二、常见子元素设置的属性

子元素设置的属性
flex:number;每个子盒子占父盒子的份数。
align-self:; 表示单个项目与其他项目有不同的对齐方式。是设置单个项目在侧轴上的排列方式。
Order:; 项目的排列顺序，默认是值越小越靠前。

三、flex-grow、flex-shrink和flex-basis的相关理解

flex-grow;grow是指扩展增长的意思,这就表明当父元素的宽度大于其各个子元素宽度之和时，并且父元素有剩余，这时，flex-grow就会说我要成长，我要长大，怎么样才能成长呢，当然是分享父元素的空间了。
flex-basis;basis英文意思是主要，所以当它和width放在一起使用的时候,把width屏蔽掉，basis遇到width时就会说我是最主要的，你是次要成分，从而忽视width。
flex-shrink;shrink英文意思是收缩，这就代表当父元素的宽度小于各个子元素宽度之和时，flex-shrink就会说外面的世界太黑了，我还是回到家去吧！因此，flex-shrink就会按照一定的比例进行收缩。

通过以下例题你会对这几个属性有更深刻的理解

一、flex的宽度计算方式是容器剩余空间+具有flex属性的元素自身尺寸：

例如在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:2的属性，给b元素flex:1的属性，不给c元素。
计算宽度是：剩余空间（400px-300px):100px + 参与flex项目尺寸200px=300px 再按3份的比例给a2份，b1份。
最后：a:width:200px ; b:width:100px ; c:width:100px

二、flex:grow的宽度计算方式只是容器剩余空间：

在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex-grow:2的属性，给b元素flex-grow:1的属性，不给c元素。
计算宽度是：剩余空间（400px-300px）:100px
剩余100px再按3份比例给a2份+自身本身尺寸，b1份+自身本身尺寸。
最后：a:width:166.7px ; b:width:133.3px ; c:width:100px

三、如果一个容器中的所有项目都给了flex或flex-grow属性，那么在计算中没有差别。两者最大的差别就在于flex的宽度是具有flex属性（即参与项目）尺寸再加上剩余空间。再除以份数剩以比例。

再举2个例子：

1、在一个width:300px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:3的属性，给b元素flex:2的属性，不给c元素。

计算宽度是：剩余空间0 + 参与flex项目尺寸200px=200px 再按5份的比例给a3份（200除以5剩以3），b2份。最后：a:width:120px ; b:width:80px ; c:width:100px

2、在一个width:300px的容器中，有a、b、c 三个width:100px的元素，给a元素flex-grow:3的属性，给b元素flex-grow:2的属性，不给c元素。

计算宽度是：剩余空间0 项目没有可分配的空间，尺度不会发生变化。最后：a:width:100px ; b:width:100px ; c:width:100px

一些面试可能会问的东东：

flex是flex-grow，flex-shrink, flex-basis
flex 取值为 none，则计算值为 0 0 auto
flex取值为 auto，则计算值为 1 1 auto
flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%
flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink取 1
flex取值为两个非负数字，则分别视为 flex-grow和 flex-shrink的值，flex-basis取 0%

flex弹性盒模型