flex布局遇到过的小问题

想要使用flex布局实现上面这种效果，

html:

    

    

    
产品title产品title产品title产品title产品title产品title产品title产品title产品title

css:

li:first-child{
    flex: 1;
}
li:nth-of-type(2){
    flex: 2;
}
li:last-child{
    flex: 3;
}

目的是使三个li 的宽度是1:2:3的关系，父元素ul设置，display:flex;

效果：

但是问题来了，当最后的li中的p强制一行显示，效果：

可见并不是我们所预想的那样。这时候子元素的宽就会将父元素撑起来，此种情况的 剩余空间 = flex box宽 - 子元素宽。 如果子元素的宽大于了整个屏幕的宽，其他元素将分配不到任何空间。这时候审查元素可以看到，前两个li元素的宽都是0，最后的li宽度==其子元素（p）的宽度。

如果此时  子元素宽度 > li宽度，且 子元素宽度 < 屏幕宽度 ，那么其他li 的宽度会根据 flex box宽 - 子元素宽 的差值再按比例分配。

解决方式：给子元素设定好宽，但是本文需求要1:2:3随屏幕宽度自适应，给定宽就行不通了。

所以给外层 li 加overflow:hidden是最方便解决方式。

下面是给自己看的小笔记：

总结了一下：

1、只设定flex-basis：
此值为基础宽/高。若子元素的宽/高大于此值，项目永远紧紧包裹其内子元素的宽/高（可以被子元素撑大）

①、flex box剩余空间计算基于实际最终的宽/高，在此基础上才进行剩余空间的计算
即：
剩余空间 = flex box宽/高 - n * flex-basis值 （子元素宽高小于flex-basis）
剩余空间 = flex box宽/高 - n * 子元素的宽/高 （子元素宽/高大于flex-basis时，即项目被子元素撑起）

②、然后进行grow 或 shrink。
子元素宽/高大于flex-basis的情况：因为项目子最多被shrink到紧贴其内的子元素，而此情况下项目完全就是被子元素撑起的，所以不会shrink只可能grow
（这种情况等同于两者皆不设定）

子元素宽/高小于项目的flex-basis的情况：则根据flex-basis来计算剩余空间。然后grow或shrink
（这种情况等同于只设定width/height）

③、由于其内子元素过宽/高，且所有项目都已经压缩到无法再压缩时；由于包裹特性，会将所处的项目或之后的项目撑出flex box

总结：
项目的宽/高 在子元素小于flex-basis时，完全受制于flex-basis的值来计算剩余空间以及进行grow或shrink。
项目的宽/高 在子元素大于flex-basis时，只受制于子元素的大小（项目的实际大小），并且该项目不会shrink，只可能grow。

极端情况：子元素炒鸡大，再所有项目都压缩到紧贴内部子元素时（无法再压缩），会导致项目本身溢出或将其他项目撑出flex box。

2、只设定width/height：
①、flex box剩余空间计算直接使用设定的width/height的值（无论子元素宽/高大于还是小于width/height）
即：剩余空间 = flex box宽/高 - n * width/height盒子的宽/高

②、然后进行grow 或 shrink。

③、其内子元素的宽/高超过最终grow或shrink后项目的宽/高时，只是子元素溢出项目。项目本身依然维持分配剩余空间后的宽高。且不会将之后的项目撑出flex box

总结：
项目的宽/高 无论子元素多大，都完全受制于width/height来进行grow或shrink。

极端情况：即使子元素炒鸡大，也不会无止境的撑大项目导致项目本身溢出或将其他项目撑出flex box，只是子元素自身溢出。并且会被后面的项目覆盖

㌍㌫㌶㍊㍍㍑㌫㌶㍍㌫㌍

3、两者皆不设定
①、项目永远包裹其内的内容的宽/高，因此宽/高等同于其内子元素的宽/高

②、flex box剩余空间的计算基于子元素的宽/高
即：剩余空间 = flex box宽/高 - n*项目内子元素的实际宽/高

③、其内的子元素过大时，由于包裹特性，会将所处的项目撑出flex box

总结：
项目的宽/高，只受制于子元素的大小（项目的实际大小），因此不会shrink，只可能grow。

极端情况：子元素炒鸡大，且所有项目都已经压缩到紧贴内部子元素（无法再压缩）时，会导致项目本身溢出或将其他项目撑出flex box。

4、两者皆设定：
相当于手动设置了width/height值，flex-basis失效（失去被撑大的特性）

https://segmentfault.com/a/1190000006559564

http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201603/443362.shtml