display:flex保持高度同时,上下不留白如何实现呀?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display:flex保持高度同时,上下不留白如何实现呀?相关的知识,希望对你有一定的参考价值。

如图所示,每个子元素的高度不同,但是flex 会把每排的内容留出一样多的的距离出来,导致了上下会留出空白,如何解决呢?前面一张图是默认高度不同的排列,后面图片是我想要的排列,flex 如何实现呀,谢谢大家。。。。。

参考技术A 伸缩盒模型中有一个 扩展和缩放,也就是分配剩余空间,那个可以解决,去看看 参考技术B 瀑布流,有用flex写法的,自己百度了解一下吧本回答被提问者采纳

以上是关于display:flex保持高度同时,上下不留白如何实现呀?的主要内容,如果未能解决你的问题,请参考以下文章

flex 布局

使用 flex 使内部 div 填充剩余高度 [重复]

删除嵌套 CSS flex 上的自动高度分布? [复制]

修复了滚动列表顶部的标题。所有列高度相同的 Flex 布局

div中所有元素上下居中对齐(父级高度有限制,子元素不限制)

BFC(块级格式上下文)详解