通过包装使容器填充容器的高度

Question

我试图使容器中的物品占据我想要的空间时遇到问题。主要问题似乎是使flex box和css网格适应宽度而不是高度的变化，因为我需要相反的行为。这基本上是我希望元素执行的操作]

检查所需的效果here。

我曾尝试同时使用flex box和css grid。这是我当前的代码，其中也包含我以前的尝试的一些残余。它只是使图像以实际大小显示。媒体容器的高度通过javascript进行了更改。

.display-img {
  padding:0px;
  margin-top:-4px;
  margin-bottom:-4px;
  flex:0 1 auto;
  height:auto;
}

.media-container{
  width: auto;
  height:800px;
  display:flex;
  //grid-template-rows: repeat(auto-fit,auto);
  //grid-template-columns: repeat(auto-fit,minmax(200px,0.5fr));
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  visibility: hidden;
}

<div class="media-container">
  <img class="display-img" src="assets/projects/feierlichkeiten/23.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/22.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/21.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/20.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/19.png"></img>
</div>

感谢每个有想法的人。

Answer 1

您的问题对我来说似乎不太清楚。

[如果要有一排图像，所有图像均具有其原始大小，则只需将弯曲对齐（行和换行）应用于父级，然后将flex: auto与margin: auto;一起添加到子级：

<div class="media-container">
  <img class="display-img" src="https://picsum.photos/160">
  <img class="display-img" src="https://picsum.photos/160/90">
  <img class="display-img" src="https://picsum.photos/150/40">
  <img class="display-img" src="https://picsum.photos/160/100">
  <img class="display-img" src="https://picsum.photos/100/290">
</div>

[[添加了随机纵横比图像以证明它们都是对齐的，而不管所有图像的尺寸具有相同的纵横比，结果将与示例图像中的结果相同]

.media-container {
  display: flex;
  flex-flow: row wrap;
}

.display-img {
  margin: auto;
  flex: auto;
}

这将执行以下操作：

• media-container：将flex flow设置为row and wrap，因此，当添加更多图像时，如果没有更多可用空间，则将它们放置在新行中。
• [在图像上，margin auto将自动对齐每个单元格内的图像（水平和垂直方向）和flex: auto，这与flex: 1 1 auto等效（意味着弯曲增长和弯曲收缩将设置为1）。 ，没有增长，没有收缩和自动伸缩[伸缩项目的初始主尺寸]）。

检查this codepen。

Answer 2

您的要求我也很困惑。您要复制的屏幕快照只是CSS网格的标准行为。所以也许我误会了。这是具有正确设置的Codepen，可以复制您发布的屏幕截图：

https://codepen.io/doughballs/pen/bGdeBQa

在我们设置的容器上：

main {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 2px solid red;
  padding: 20px;
}

这告诉内容最小宽度为200像素，如果没有足够的空间，则将其包装。

并在图像上：

img {
  display: block;
  width:100%;
  border: 2px solid black;

}

这是Jen Simmons的宝贵资源：

https://www.youtube.com/watch?v=tFKrK4eAiUQ&t=218s

Answer 3

为了达到理想的效果，请使用带有“孩子”媒体的容器，每个孩子都有其内容。

<div class="media-container">
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/90">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/150/40">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/100">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/100/290">
    </div>
</div>

您搜索的规则是'flex-wrap：wrap'

.media-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.media-container .media{
    width: 33%;
}