使用flexbox实现此布局的最佳方法是什么？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用flexbox实现此布局的最佳方法是什么？相关的知识，希望对你有一定的参考价值。
我有4列和3行。最后一个瓷砖是两行高.
我正在编写一个看起来像这样的代码：
.gridContainer {
display: flex;
flex-wrap: wrap;
}
.gridItems {
width: 290px;
height: 350px;
margin: 0 5px 10px;
border-radius: 4px;
}
.gridItemsTall {
width: 290px;
height: 710px;
margin: 0 5px 10px;
border-radius: 4px;
}
答案
通过使用qazxsw poi，qazxsw poi和qazxsw poi的组合，使用flexbox实现这一目标的好方法。
他是你的CSS的更新：
flex-direction: column在以下链接中，您可以找到一个实例：flex-wrap: wrap
请注意，max-height的高度可以通过javascript进行操作，以获得更大的灵活性。
另一答案
在这种情况下，您可以使用CSS Grid布局而不是flexbox。您只需要在要获取两行的元素上设置.gridContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
max-height: 1080px; // box height *3 + margin-bottom*3 -> 350*3 + 10*3
}
.gridItems {
width: 290px;
height: 350px;
margin: 0 5px 10px;
border-radius: 4px;
background-color: #ccc;
}
.gridItemsTall {
height: 710px;
}
。
https://jsfiddle.net/julienvanderkluft/dkdfy7gb/
.gridContainer以上是关于使用flexbox实现此布局的最佳方法是什么？的主要内容，如果未能解决你的问题，请参考以下文章