flex布局配置

设置了flex-basis之后元素上面的宽度将不再生效

flex-grow计算方式

flex-shrink的计算方式

flex子元素属性

flex-basis：设置子元素伸缩基准值(子元素占据的主轴空间)

• 设置flex-basis属性后 width属性失效
  

flex-grow：设置子元素的扩展比例(在剩余空间中子元素的扩展比例)

• 默认值为0 即有剩余空间也不扩展
  

• flex-grow属性值相同时 子元素将等分剩余空间
  

flex-shrink：设置子元素的收缩比例(在空间不足时子元素的收缩比例)

• flex-shrink属性值相同时 子元素将等分缩小(前提是basis属性值相同)

• 计算公式：空间差值 * shrink值 * basis值 / (各元素 basis值 * shrink值 之和)

flex：涉及子元素伸缩比例属性(flex-grow/flex-shrink/flex-basis)的简写属性

• flex属性简写顺序：flex-grow/flex-shrink/flex-basis

flex-basis子元素基础宽度，width失效

flex-grow 剩余空间扩展比例

flex-shrink 子元素缩小比例、默认对等缩小、0不允许缩小

flex-basis

弹性盒伸缩基准值   

子元素相对于父元素的基准值 

设置此属性后 width失效 

• flex-basis 设置后，宽度不再生效；伸缩基准值就是宽度

• flex-grow 有剩余空间才有用武之地。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

• flex-shrink 等于0时候不允许缩小，要有超出宽度才可用。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

这里也很重要

flex的值用三个数字来表示

第一个代表的是 flex-grow

第二个代表的是 flex-shrink

第三个代表的是 flex-basis

这里注意第二行 和第三行后面的两个字 '比率'

就是说 flex-grow 和 flex-shrink 都是一个比值.

这里很有意思 超出部分的缩小值 比例 使用flex-shrink来设定.

如果关闭了后台自动的缩小(即设置flex-shrink:0) 效果就是 体现出子元素的宽度总和的实际大小.

子元素超出父元素的情况.

实际上他自动做了 flex-shrink的操作.

这里的计算用到了 flex-basis 和 flex-grow 两个值进行配合运算.

注意这里的第四行

    flex 是flex-grow flex-shrink flex-basis的缩写

这里使用了 "nth-child"来选择指定的子元素

flex-basis 效果(这个属性可以覆盖width的设置值)

flex-basis：设置弹性盒子伸缩基准值

flex-grow:占剩余空间几分

flex-shrink：超出部分占空间几分

flex : flex-grow(扩展比率)    flex-shrink(缩小比率)    flex-basis(盒子的伸缩基准值)

flex 布局

其他属性。      

flex其他属性