css - 想问一下要如何用flex做出如图的排版？？？？空白地方是间隙

问题描述

问 题

解决方案

可以看看阮一峰老师的那个flex教程学习一下就会写了。

更新：

---

抱歉一开始没有看清楚需求，如果楼主问的是外层容器宽度不定、子项目个数不定的情况，据我的知识掌握程度，纯flex是不能实现的。

个人感觉如果宽度不定相差较大的话，比如400px ~ 1800px，建议设计可能有待考虑，比如一个子项目的时候情况，两个子项目的情况，如果单纯是justify-content: space-between;或是 flex + @media那么也无法通过css来进行不同子项目个数时的样式布局。

如果是宽度在预知与控制范围内，可以根据flex + @media + item-wrapper来进行布局更改。

最后能想到的比较灵活方式还是类似于bootstrap，利用@media + 百分比更加方便一点。

如果有更好的思路，欢迎赐教。 [谦虚脸]

这篇关于css - 想问一下要如何用flex做出如图的排版？？？？空白地方是间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！