css flexbox - how to align corresponding elements in "card" design?

Question

here is my example, 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>

How to align img's, titles and paragraph's starts to some baselines to make all cards look more orderly?

I.e. the distance between card top and img, title, paragaraph should be the same.

In my code it has different margins.

Answer 1

If you remove the offer you can also make it work even if your i.e. head line would have different amount of lines.

By using the order property you can tell how they should align in a group without a wrapper

* {
  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>

Answer 2

You just need to remove justify-content: center; from the .offer selector. That is the CSS that is vertically centering your content.

https://plnkr.co/edit/TCiW9x5AhbS72ZP9ZWJO

UPDATE:

You can use margin-top:auto on the button to push it to the bottom of the div.

https://plnkr.co/edit/8rZyTHueltxfS7OQxsB2