如何将Flexbox转换为特定方式？

Question

我想使用flexbox将div分成下面的图像，但是我不确定该怎么做。我是否需要为其使用绝对位置，还是flexbox有没有太多问题的方法？

Answer 1

您所描述的肯定是可能的。我在下面概述了如何实现它。 This link应该为您填写空白。本质上，您需要一个具有display: flex和flex-direction: row属性的容器。然后，容器内的子代将需要适当设置flex-direction和flex-grow属性。

您还应该检查this site，以查看所定位的浏览器是否支持flexbox。

编辑如果要重新排序HTML元素，还必须设置order property-感谢@BugsArePeopleToo在评论中提出了此问题。

Answer 2

如果将flexbox用于此布局，则将需要一些额外的包装div：一个包含所有五个div，一个包含div 1和4，一个包含div 2和5。这也许也值得它可以尝试CSS网格，而CSS网格是为这种没有包装div的东西而构建的。