【心得】你今天青蛙了吗?flex之路-flex设定了宽却没有用???

前言

曾经有一段瞎摸索的时间，老是不知道为什麽flex时灵时不灵
歪着脑袋想不通为什麽...

直到摸清楚观念之後发现不是flex不灵，是我的脑袋没开窍呀!!!

今日主题：

flex设定了宽却没有用!?

实验情境：
父层设定

  width: 600px;
  height: 600px;
  background-color: #ccc;

  display:flex;

情况1

对方块进行不同宽度的设定~
设定width:180x，180px * 3 = 540 (< 父层600px)
设定width:200x，200px * 3 = 600 (= 父层600px)
设定width:220x，220px * 3 = 660 (> 父层600px)
到这时应该会想说~第三个会自己排下去变成第二列(*´∀‵) ~ ♥

嘿!但事实是↓↓↓↓↓↓

咦? 宽度被无视了? 每一个方块宽度维持在了200px!?

再多加两个宽220px的方块下去...

咦? 我的宽220px没有用了!!!
flex不灵啦啦啦啦啦啦啦啦!!

(敲!)莫急莫慌莫害怕

因为flex预设是"不换行"的!

没有帮父层加入 flex-wrap:wrap; 的情况下
它会帮内部的物件平均分配宽度，所以宽度的设定就没有效果了
加入flex-wrap:wrap;之後宽度就可以显现出来罗!

懒得计算尺寸，那就交给flex-grow吧!

这时候有个问题，假如今天

1. 需要RWD缩放→ 父层宽度需要用 % 来设定(也就是在缩放过程中不好抓实际宽度，绝对单位难以使用)
2. 里面的物件数量不固定
3. 物件"总"宽度有可能小於父层宽度
4. 必须填满父层宽度

如图所示：

反射思考就是把 宽度/物件数量 去设定物件宽度

比如
第一张图有5栏，宽度设定 width:20% (100/5)
第二张图有4栏，宽度设定 width:25% (100/4)

有几个选单就要分开设定几次...

呀~好麻烦呀!万一哪天物件有多有少又要改

这时候可以用flex-grow: 1 意思是物件会分配"1份"的剩余空间

在物件的共用class上设定後就可以一次改完罗~

不管它1个2个3个4个5个都放马过来吧

结论

flex 有毒! 吸起来好过瘾