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

Posted 2023-03-05

【中文标题】使 flexbox 中的项目占据所有垂直和水平空间

【英文标题】：Make items in a flexbox take up all vertical and horizontal space

【发布时间】：2017-04-16 05:26:47

【问题描述】：

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

将align-content: space-between 应用到您的flexbox 以执行此操作（这当然假设您有足够的可用 空间用于垂直对齐）- 请参见下面的演示：

align-content 属性修改了 flex-wrap 的行为 财产。它类似于 align-items，但不是对齐 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>

【讨论】：

这个解决方案将 flexmodel 引入了荒谬的境地。结果是静态大小。 Flex 应该在那里处理动态变量。对于这个结果，flex 是不必要的。

支持显示一个有效的解决方案。但这不是一个。对不起

@JanNahody 看在上帝的份上，这是一个有效的！！请阅读align-content 以及为什么使用它！

Flex 已用于处理动态变量。您的解决方案为此提供了有效的解决方案。然而，这是不正确的，因为它不能处理动态变量。这是一个解决方案，但不是一个灵活的解决方案。这就是我演戏的原因。

@kukkuz 好像你在这个 cmets 部分过得很艰难！ （我猜是一群艰难的人）无论如何谢谢你的回答！