参见英文答案 >
Targeting flex items on the last row3个
我的目标是每行有三个弹性项目并使用空间 – 因此每行中的第一个和第三个项目接触容器的外部但保持相等的间距.
我的目标是每行有三个弹性项目并使用空间 – 因此每行中的第一个和第三个项目接触容器的外部但保持相等的间距.
这可以按预期工作,但是当第五个项目没有按照我想要的方式对齐时,问题出现在第二行,直接在第二个项目下面.我将拥有可变数量的内容,因此需要布局才能使用任意数量的框.
.main{
background: #999;
margin:0 auto;
width:1300px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Box{
background: #7ab9d7;
color: #555;
height: 300px;
width: 30%;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
padding-top: 120px;
}
<div class="main">
<div class="Box">1</div>
<div class="Box">2</div>
<div class="Box">3</div>
<div class="Box">4</div>
<div class="Box">5</div>
</div>
解决方法
使用占据容器中最后一个槽的不可见伪元素：
.main::after {
height: 0;
width: 30%;
content: "";
}
高度为0,以便在填充行时,伪元素开始下一行,它不会向容器添加高度.
完整代码：
.main {
background: #999;
margin: 0 auto;
width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Box {
background: #7ab9d7;
color: #555;
height: 30px;
width: 30%;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
padding-top: 120px;
}
.main::after {
height: 0;
width: 30%;
content: "";
}
<div class="main"> <div class="Box">1</div> <div class="Box">2</div> <div class="Box">3</div> <div class="Box">4</div> <div class="Box">5</div> </div>
