html - css flexbox - 如何对齐 "card"设计中的相应元素？

Question

这是我的例子， https://plnkr.co/edit/uj4Z7W8nT2CSQ34i150x

<style>
* {
  margin : 0;
  padding : 0;
}

#container {
  display : flex;
  justify-content : center;
  align-items : center;
  flex-wrap : wrap;
  align-content : center;
}

.offer {
  display : flex;
  align-items : center;
  background : #eee;
  flex-basis : 20vw;
  min-height : 45vh;
  flex-direction : column;
  margin : 1vw;
  border-radius : 1vh;
}

p {
  padding : 1vw;
}

img {
  width : 7vw;
  height : auto;
  margin-top : 0.5vh;
  margin-bottom : 1vh;
}

button {
  margin-bottom : 0;
}
</style>

如何将 img、标题和段落的开头与一些基线对齐以使所有卡片看起来更有条理？

即card top和img, title, paragaraph之间的距离应该是一样的。

在我的代码中它有不同的边距。

Answer 1

如果您删除 offer，即使您的标题行会有不同的行数，您也可以让它工作。

通过使用 order 属性，您可以在没有包装器的情况下告诉它们如何在组中对齐

* {
  margin : 0;
  padding : 0;
}

#container {
  display : flex;
  justify-content : center;
  flex-wrap : wrap;
}

#container > * {
  flex-basis : 22vw;
  margin: 0 1vw;
  background: #eee;
  box-sizing: border-box;
}

#container > .image {
  order: 1;
  padding : 10px 0;
  text-align: center;
}
#container > h3 {
  order: 2;
  padding : 10px 0;
  text-align: center
}
#container > p {
  order: 3;
  padding: 1vw;
}
#container > .button {
  order: 4;
  padding : 10px 0;
  text-align: center;
}

img {
  width : 7vw;
  height : auto;
}

<div id="container">

      <div class="image">
        <img src="http://www.pngall.com/wp-content/uploads/2016/06/Limited-offer-PNG-HD.png" alt="offer 1 description">
      </div>      
      <h3>offer 1</h3>
      <p>Lorem tenetur ad mollitia exercitationem fugit expedita est doloribus quia! Deserunt quia omnis molestias amet quibusdam accusamus? Minus doloremque deserunt earum neque natus. Corporis adipisci doloremque consectetur beatae incidunt? Veniam. 1</p>      
      <div class="button">
        <button>buy it!</button>
      </div>
      
      <div class="image">
        <img src="http://www.pngall.com/wp-content/uploads/2016/06/Limited-offer-PNG-HD.png" alt="offer 1 description">
      </div>
      <h3>offer 2 which has a longer text</h3>
      <p>Adipisicing minus quam beatae beatae error. Laudantium vel officia eum perspiciatis atque laborum Vel tempora architecto eos laborum veniam Quis nihil numquam ab reiciendis sapiente dolor Dolor adipisci nihil officia. 2</p>
      <div class="button">
        <button>buy it!</button>
      </div>

      <div class="image">
        <img src="http://www.pngall.com/wp-content/uploads/2016/06/Limited-offer-PNG-HD.png" alt="offer 1 description">
      </div>
      <h3>offer 3</h3>
      <p>Consectetur debitis maxime accusamus explicabo cupiditate Itaque quaerat laboriosam nisi ipsa possimus consequuntur Est fugit necessitatibus tempore eveniet provident Optio esse asperiores tempore eius perspiciatis perferendis architecto, mollitia dicta. Nihil! 3</p>
      <div class="button">
        <button>buy it!</button>
      </div>

      <div class="image">
        <img src="http://www.pngall.com/wp-content/uploads/2016/06/Limited-offer-PNG-HD.png" alt="offer 1 description">
      </div>
      <h3>offer 4</h3>
      <p>Consectetur minima illo optio quod repellat Perspiciatis omnis sed provident distinctio doloremque Odit est magnam aliquid accusamus expedita impedit Eligendi ab et soluta laboriosam sunt Debitis quidem provident ducimus saepe! 4</p>
      <div class="button">
        <button>buy it!</button>
      </div>

  </div>