参见英文答案 >
Targeting flex items on the last row3个
我正在寻找具有动态宽度的卡片来填充他们的容器,但是如果卡片太小则能够包装.我做到了这一点.然而我注意到最后一张卡片填满了剩下的空间.我不希望它那样做.我希望它保持相同的列结构.这可能吗？如果有另一种方法可以让我知道,我不必使用flexBoxes.
我正在寻找具有动态宽度的卡片来填充他们的容器,但是如果卡片太小则能够包装.我做到了这一点.然而我注意到最后一张卡片填满了剩下的空间.我不希望它那样做.我希望它保持相同的列结构.这可能吗？如果有另一种方法可以让我知道,我不必使用flexBoxes.
.container {
padding: 20px;
display : flex;
flex-flow: row wrap;
background:white;
}
.container > div {
border: 1px solid black;
background: #ececec;
margin:5px;
min-width:200px;
padding: 10px;
margin-left: 10px;
flex: 1;
}
<div class="container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
解决方法
您可以使用CSS网格布局,使用grid-template-columns执行此操作.使用minmax(200px,1fr),您可以将每列的最小宽度设置为200px,将最大宽度设置为网格布局的一个轨道.您还需要使用自动调整功能,以便在有可用空间的情况下使轨道占据全宽.
.container {
padding: 20px;
display: grid;
background: white;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}
.container > div {
border: 1px solid black;
background: #ececec;
margin: 5px;
padding: 10px;
margin-left: 10px;
}
<div class="container"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> </div>
