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

html - 如何不将元素包装在新行上?-LMLPHP

这是我当前的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以获取更多信息。希望这个对你有帮助。

10-07 19:06
查看更多