这个问题已经在这里有了答案： > Targeting flex items on the last or specific row 3个
> Wrapping flex items in the last row 1个
我有一个要与CSS一起显示的项目列表.最初,在一行上并排只有两个项目,但是现在我想使其对较大的屏幕响应,因此我想使其在一行上显示3个项目.我的旧代码看起来像这样,其中justify-content：space-between.看起来不错,可以显示奇数个项目.
.flex-container-old{
margin-top: 50px;
background: magenta;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Box-old{
width: 40%;
border: 1px solid black;
margin-bottom: 20px;
height: 300px;
background: orange;
}
.wrapper{
margin: 0 auto;
width: 80%;
}
body{
background:#D3D3D3;
}<div class="wrapper">
<div class="flex-container-old">
<div class="Box-old">
</div>
<div class="Box-old">
</div>
<div class="Box-old">
</div>
<div class="Box-old">
</div>
<div class="Box-old">
</div>
</div>
</div>因此,我很自然地通过修改width属性将其扩展为一行中的三项,直到最后得到以下结果.
.flex-container-new{
background: lightblue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Box {
width: 30%;
border: 1px solid black;
margin-bottom: 20px;
height: 300px;
background: orange;
}
.wrapper{
margin: 0 auto;
width: 80%;
}<div class="wrapper">
<div class="flex-container-new">
<div class="Box">
</div>
<div class="Box">
</div>
<div class="Box">
</div>
<div class="Box">
</div>
<div class="Box">
</div>
</div>
</div>在上面的代码中一行包含三个项目的情况下,我的问题是我希望将最后一行中的最后一个项目推到左侧,并与上面一行中的中间项目对齐.不幸的是,引导程序不是一个选择.这是出于学习目的.有没有办法我可以仅使用CSS来实现以上目标？提前谢谢了.
最佳答案
使用CSS Grid可以更轻松地控制它,因为我们可以同时指定x和y轴.使用FlexBox,您只能可靠地控制x轴.如果您尚未听说过fr单位,则为defined by Mozilla,如下所示：
The
fr,which is short for “fraction”,is a unit which represents a fraction of the available space in the grid container.
使用Grid的另一个好处是,我们可以删除.Box中设置的height和margin-bottom底部以及flex-wrap规则.从单元格的高度到它们之间的网格间隙间距,有关此网格布局的所有内容均在父级中定义.
.grid-container-new {
background: lightblue;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,300px);
grid-gap: 20px;
}
.Box {
border: 1px solid black;
background: orange;
}<div class="grid-container-new">
<div class="Box">
</div>
<div class="Box">
</div>
<div class="Box">
</div>
<div class="Box">
</div>
<div class="Box">
</div>
</div>