使可变项目使用100%具有可变方向的父项高度:行

Question

所以我尝试在一个flex容器中放置3个高度和宽度相等的flex项。我成功地使3个弹性项目具有相同的宽度。然而，第一个flex-item有一个div (.images)，它也是一个flex容器，它比其他两个flex -items的(.images) div包含更多的子项。这会导致第一个flex项的高度大于另两个flex项的高度。我如何使其他两个flex项的高度与第一个相同，即使它们没有相同数量的子项？我研究过这个问题，但只有当flex-direction属性设置为column时，我才能找到答案。在我的例子中，flex-direction属性在flex容器中设置为row。

​

body {margin: 0}

.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.flex-items {
  width: 33.333%;
  height: 100%;
}

.images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
}

<div class="flex-container">
  <div class="flex-items">
    <h1>Some Title</h1>
    <div class="images">
      <img src="image1.jpg" alt="">
      <img src="image2.jpg" alt="">
      <img src="image3.jpg" alt="">
      <img src="image4.jpg" alt="">
      <img src="image5.jpg" alt="">
    </div>
  </div>
  <div class="flex-items">
    <h1>Some Title</h1>
    <div class="images">
      <img src="image6.jpg" alt="">
      <img src="image7.jpg" alt="">
    </div>
  </div>
  <div class="flex-items">
    <h1>Some Title</h1>
    <div class="images">
      <img src="image8.jpg" alt="">
      <img src="image9.jpg" alt="">
    </div>
  </div>
</div>

​

Answer 1

你需要给.images内部的图片一个100%的高度和一个自动的宽度--如果你想让它们按比例缩放，就像这样：

.images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%; (images is getting 100% height, but nothing is telling its children to go up in height)
    justify-content: center;
}

.images img { (address the children)
  height:100%;
  width:auto;
}

Answer 2

如果你不设置图片的宽度和高度，他们将使用auto，并根据你使用的浏览器的不同对flex box进行缩放。

图像可以内联操作，也可以通过使用height或width属性使用css进行操作，下面是这两者的一个示例。

内联示例1：

<img src="#.png" width="auto" height="100%" />

Css示例2：

div.images > img {  
 height: 100%;  
 width: auto;  
}   

这也是一个好主意，优化图像为您的网页，而不是依赖于自动缩放的最佳结果。毕竟，你是那个知道最终结果应该是什么的人。

:)