Heara.in

flex-wrap的妙用

2019 M05 6 • ☕️ 2 分钟阅读

最近接到一个比较棘手的布局需求,只能用flex实现,并且无法使用js计算,经过和同事们的讨论最终实现了,各位看官往下看

布局要求

  1. A B C单行布局,A的宽度固定,BC宽度可变

1

  1. 当宽度不够时,不显示C

2

  1. 若B的内容宽度过长,最大伸长到容器右边

3

解决方案

我们尝试了各种方案,但是BC的宽度比例都不知道,我们得出结论这个方案不可行,只能请产品修改方案,BC同时伸缩。后来qfish同学提出了一个非常牛逼的想法: 在BC外面在加一层容器,同时设置flex-wrap: wrap就可以实现我们想要的效果, 原理如下:

#D {
  flex-wrap: wrap;
  height: 50px;
  overflow: hidden;
  flex-grow: 1;
}

由于设置了flex-wrap: wrap,当D容器放不下C时,C就会折行,跑到下一行,然而…,由于overflow: hidden,我们没有办法看到它,也就是说C是存在的,只不过我们看不到而已,而且C是定高的,不会影响整体布局。

4

在明白背后的原理后,我不由得觉得qfish同学脑子很灵活,也庆幸自己又学会了一招,也验证了一个真理:

CSS技巧是学不完的!— 鲁迅

局限性

以上解决方案只限于整体高度固定,如果无法确定ABC最大高度,就无法通过设置D的高度来来隐藏C,因而无法实现想要的效果。

转念一想,或许可以通过设置Bmargin-bottom:9999px, Dmargin-bottom: -9999px,待验证…

收获

  • 还是要多交流,往往你觉得真的不行了的时候,其实还是有路可以走的

  • 多做,多积累,不要等到书到用时方恨少,qfish同学能想到这个方案,一定有着过人的积累