![使Flexbox中的项目占据所有的垂直和水平空间 使Flexbox中的项目占据所有的垂直和水平空间](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了使Flexbox中的项目占据所有的垂直和水平空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前有一个容器内的元素,其中每个包含一个图像。我想使用flexbox将这些分布到四角或容器中。图像水平分布正确,但不占用所有可用空间垂直。
以下是目前的情况:
这是我的标记:
< 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 class =h2_lin>解决方案
在你的 flexbox
上应用 align-content:space-between
来做到这一点(当然, )
$ b
div.container {width:405px; height:405px;背景:rgba(0,0,0,0.1);显示:flex; flex-wrap:wrap;证明内容:空间之间; align-content:space-between;} div.container div.photo {width:180px; height:180px;溢出:隐藏; 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>
I currently have elements within a container, each of which contains an image. I want to distribute these into the four corners or the container, using flexbox. The images are distributing correctly horizontally, but don't take up all the available space vertically.
Here's what it looks like at the moment:
Here's my markup:
<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>
And my (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%;
}
}
}
解决方案
Apply align-content: space-between
to your flexbox
to do that (this assumes of course that you have sufficient available space for the vertical alignment)- see demo below:
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>
这篇关于使Flexbox中的项目占据所有的垂直和水平空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!