我目前有一个容器中的元素,每个元素都包含一个图像。我想使用 flexbox 将它们分布到四个 Angular 或容器中。图像在水平方向上正确分布,但不会在垂直方向上占据所有可用空间。
这是我的标记:
<div class="container">
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
</div>
还有我的 (S)CSS:
div.container {
width: 405px;
height: 405px;
background: rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div.photo {
width: 180px;
height: 180px;
overflow: hidden;
border-radius: 5px;
img {
height: 100%;
}
}
}
div.container {
width: 405px;
height: 405px;
background: rgba(0, 0, 0, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div.container div.photo {
width: 180px;
height: 180px;
overflow: hidden;
border-radius: 5px;
}
div.container div.photo img {
height: 100%;
}
<div class="container">
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
</div>
最佳答案
将 align-content: space-between
应用到你的 flexbox
来做到这一点(这当然假设你有足够的可用空间垂直对齐)- 请参见下面的演示:
The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. (Source: W3schools)
div.container {
width: 405px;
height: 405px;
background: rgba(0, 0, 0, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
div.container div.photo {
width: 180px;
height: 180px;
overflow: hidden;
border-radius: 5px;
}
img {
height: 100%;
}
<div class="container">
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
</div>
关于html - 使 flexbox 中的元素占据所有垂直和水平空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40912941/