使用flex使所有行在不同列中具有相同的高度？

Question

我正在尝试制作一个产品项目页面，您可以在该页面中连续查看3个项目，并且每个细节均以相同的高度开始。

它还必须具有响应性，因此在移动设备上，彼此之间会得到项目1、2和3。

如何将图像1,2和3放在一行上，使它们都处于图像2的相同高度？

.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  background: #565656;
  padding: 5px;
  align-content: space-between;
  justify-content: space-between;
  overflow: hidden;
}

.flexbox div {
  text-align: center;
  padding: 20px 0;
  margin: 5px;
}

.flexbox .left {
  background-color: #D30058;
}

.flexbox .center {
  background-color: #36ABE1;
}

.flexbox .right {
  background-color: #23B776;
}

@media(min-width:768px) {
  .flexbox {
    flex-flow: row nowrap;
  }
  .flexbox div {
    width: 33.33% !important;
  }
}

<div class="flexbox">
  <div class="left">
    <span class="title">
      <p>Title 1</p>
    </span>
    <span class="subtitle">
      <p>Sub title 1 (short)</p>
    </span>
    <span class="image">
      <p>Image 1</p>
    </span>
    <span class="price">
      <p>Price 1</p>
    </span>
  </div>
  <div class="center">
    <span class="title">
      <p>Title 2</p>
    </span>
    <span class="subtitle">
      <p>Sub title 2<br /> (This could be a very long title, maybe over two or three lines)</p>
    </span>
    <span class="image">
      <p>Image 2</p>
    </span>
    <span class="price">
      <p>Price 2</p>
    </span>
  </div>
  <div class="right">
    <span class="title">
      <p>Title 3</p>
    </span>
    <span class="subtitle">
      <p>Sub title 3 (short)</p>
    </span>
    <span class="image">
      <p>Image 3</p>
    </span>
    <span class="price">
      <p>Price 3</p>
    </span>
  </div>
</div>

Answer 1

也使您的.flexbox div-> flex。

.flexbox div {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  background: #565656;
  padding: 5px;
  align-content: space-between;
  justify-content: space-between;
  overflow: hidden;
}

.flexbox div {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
  padding: 20px 0;
  margin: 5px;
}

.flexbox .left {
  background-color: #D30058;
}

.flexbox .center {
  background-color: #36ABE1;
}

.flexbox .right {
  background-color: #23B776;
}

@media(min-width:768px) {
  .flexbox {
    flex-flow: row nowrap;
  }
  .flexbox div {
    width: 33.33% !important;
  }
}

<div class="flexbox">
  <div class="left">
    <span class="title">
      <p>Title 1</p>
    </span>
    <span class="subtitle">
      <p>Sub title 1 (short)</p>
    </span>
    <span class="image">
      <p>Image 1</p>
    </span>
    <span class="price">
      <p>Price 1</p>
    </span>
  </div>
  <div class="center">
    <span class="title">
      <p>Title 2</p>
    </span>
    <span class="subtitle">
      <p>Sub title 2<br /> (This could be a very long title, maybe over two or three lines)</p>
    </span>
    <span class="image">
      <p>Image 2</p>
    </span>
    <span class="price">
      <p>Price 2</p>
    </span>
  </div>
  <div class="right">
    <span class="title">
      <p>Title 3</p>
    </span>
    <span class="subtitle">
      <p>Sub title 3 (short)</p>
    </span>
    <span class="image">
      <p>Image 3</p>
    </span>
    <span class="price">
      <p>Price 3</p>
    </span>
  </div>
</div>