flex:1？弹性盒模型的使用

前几天看同事写的代码里有flex:2 虽然用弹性盒子模型但是从来没这么用过，大概是用的不深的缘故，所以今天来实验一下flex这个css属性是干什么的。
首先上例子代码

<div style="display: flex;width:100%;">
    <div style="height:20px;background: yellow;flex:1">123123</div>
    <div style="height:20px;background: red;flex:1;">234434</div>
    <div style="height:20px;background: blue;flex:1;">12343433123</div>
  </div>

flex1.png

flex这个属性原来是：让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
然后实验一下如何忽略内容的

flex22.png

当我的内容真的超过它本身的宽度的时候就会折行显示，由于我设置了height的值，所以会超出。可以加大height的值或者添加overflow:hidden就可以解决了~
然后在调试的时候发现flex还有属性值

fexl3333.png

然后拆分后又写了一下

felx33333.png

flex-basis是最小的宽度，
flex-grow就是设置flex的属性值啦
flex-shrink我也不知道怎么形容他，大概意思就是可以决定自己收缩多少。
附上菜鸟教程上的说明
说明已经写得很明白啦，要是还是有点模糊可以自己尝试写一下。多次试验就知道怎么用了~

fexl4444.png