CSS Flexbox - 使包含其他元素的元素具有相同的高度

Question

我正在尝试使用Flexbox创建一个布局，其中包含由3个其他内部元素组成的元素。父item元素包含3个divs：image，button，text。问题是我的项目不会总是包含与其他项目高度相同的图像或文本。按钮是一个具有一致高度的东西。我试图弄清楚是否有可能让我的每个image div与最高的div相同，并且text div的高度相同。我还希望图像垂直对齐到底部，所以如果一个元素的图像较短，那么使元素具有相同高度的空白区域将高于图像，如下所示：

这是我到目前为止所做的：

.container {
    display:flex;
    flex-wrap:wrap;
    flex-flow:row wrap;
    justify-content:center;
}

.item {
    max-width:200px;
    margin:0 20px;
}

<div class="container">
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x300" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>consectetur adipiscing elit.</p>
      </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x200" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x250" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x270" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
  </div>
</div>

我知道我可以使用Javascript循环遍历每个项目以获得最高权限并更改所有其他项目的CSS，但我想尽可能使用CSS。我也知道我可以将图像容器的高度设置为最高图像的高度，但这些图像将是动态的，并且会有很多图像，所以我宁愿有一个解决方案，不需要硬编码值。

Answer 1

展开.item课程并添加justify-content: flex-end;会提供大部分影响，但据我所知，如果您必须在至少一个项目上设置特定高度希望两个元素在flexbox中对齐。虽然很高兴被证明是错误的。

您也可以在第一个孩子身上使用margin-top: auto将任何未使用的空间推到顶部，其他所有空间都将向下推。

.container {
    display:flex;
    flex-wrap:wrap;
    flex-flow:row wrap;
    justify-content:center;
}

.item {
    max-width:200px;
    margin:0 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.text {
    height: 36px; /* magic number */
}

<div class="container">
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x300" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>consectetur adipiscing elit.</p>
      </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x200" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x250" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="http://placehold.it/150x270" />
    </div>
      <div class="button">
        <button>Click Me</button>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
  </div>
</div>