使Flexbox中的项目占据所有垂直和水平空间

Question

我目前在一个容器中有元素，每个容器都包含一个图像。我想使用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%; 
     }     
    } 
} 

Answer 1

应用align-content: space-between您flexbox做（这当然假设你有足够的可用空间为垂直对齐） - 见下面的演示：

的对齐内容特性修改柔性包装 财物的行为。它与对齐项目类似，但不是对齐flex项目，而是对齐flex线条。 （来源：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>