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

时间:2016-12-01 14:17:44

标签: html css image css3 flexbox

我目前在容器中有元素,每个元素都包含一个图像。我想使用flexbox将它们分配到四个角或容器中。图像水平分布正确,但不会垂直占用所有可用空间。

目前的情况如下:enter image description here

这是我的标记:

<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>

1 个答案:

答案 0 :(得分:8)

align-content: space-between应用于flexbox以执行此操作(当然,假设您有足够的可用空间用于垂直对齐) - 见下面的演示:

  

align-content属性修改了flex-wrap的行为   属性。它类似于align-items,但不是对齐flex   物品,它对齐柔性线。   (来源:W3schools

&#13;
&#13;
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%;
}
&#13;
<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>
&#13;
&#13;
&#13;