This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5个答案)
3个月前关闭。
如图所示,我想包装物品。

这是我当前的HTML和CSS。
这也是一个小提琴。
https://jsfiddle.net/3Ly5zh4n/1
我建议阅读CSS技巧A Complete Guide to Grid以获取更多信息。希望这个对你有帮助。
(5个答案)
3个月前关闭。
如图所示,我想包装物品。
这是我当前的HTML和CSS。
<div class="column-container">
<div class="col item">1 <- More text and thus taller than the other ones</div>
<div class="col item">2</div>
<div class="col item">3</div>
<div class="col item">4</div>
<div class="col item">5</div>
</div>
.column-container {
display: flex;
justify-content: center;
flex-flow: row wrap;
height: 100%;
}
.item {
height: fit-content;
min-width: 300px;
max-width: 300px;
margin: 10px;
}
这也是一个小提琴。
https://jsfiddle.net/3Ly5zh4n/1
最佳答案
Flexbox可能不是最佳选择,因为Flexbox用于垂直或水平相邻显示内容。我建议改用CSS Grid。对于某些人来说,这可能是一个新领域,但是对于处理CSS中的列来说,这是一个不错的选择。
以下是如何使用它的示例。方法repeat(auto-fill, ...)
使用每个元素的完整分数或最小150像素(在您的情况下为300像素)填充整个容器。
.column-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
height: 300px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
color: white;
background-color: red;
}
.item--first {
grid-row: 1 / span 2;
}
<div class="column-container">
<div class="item item--first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
我建议阅读CSS技巧A Complete Guide to Grid以获取更多信息。希望这个对你有帮助。