Flex items of same height

Question

Im having problem Flex items Im trying to create flex containers of same height but its not working, could someone now what would be the issue I tried with flex:1, and other properties but it just wont work Here is my sample code:

Sample Layout

.recent-wrapper.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  padding: 50px 50px 40px 50px;
}

.post-image {
  width: 100%;
  height: 250px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #999;
}

article.popular_posts {
  min-width: 250px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  margin: 20px 1%;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.grid-date {
  background-color: rgb(237, 43, 71);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  min-height: 48px;
  min-width: 48px;
  padding: 5px 10px;
  position: absolute;
  right: 15px;
  text-align: center;
  text-transform: uppercase;
  top: 0;
}

.post-container {
  width: 100%;
  padding: 5px 10px 10px 10px;
  margin-bottom: 5px;
  text-align: left;
}

<div class="recent-wrapper container">
  <article class="popular_posts">
    <div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/f-16-min.jpg');">
    </div>
    <div class="grid-date">
      <span class="day"> 07</span>
      <span class="month"> Oct</span>
    </div>
    <div class="post-container">
      <h2> Ф-16 Блок 70/72 “ПОСЛЕДЊИ ФАЛКОН” </h2>
      <p>Захваљујући уговорима о куповини вишенаменског борбеног авиона Ф-16”Figthing Falcon”&nbsp; БЛОК 70/72&nbsp;који су са његовим призвођачем, америчком компанијом “Локид Мартин” потписали</p>
      <div class="submit-btn">
        <a href="https://geostrateg.com/naoruzanje/f-16-blok-70-72-poslednji-falkon/" class="read-more">Сазнај Више</a>
      </div>
    </div>
  </article>
  <article class="popular_posts">
    <div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/win-azur-featured.jpeg');">
    </div>
    <div class="grid-date">
      <span class="day"> 07</span>
      <span class="month"> Oct</span>
    </div>
    <div class="post-container">
      <h2> СТИЖЕ АЖУРУРИРАЊЕ за “WINDOWS 10” </h2>
      <p>Добре вести! Највећа светска корпорација “IT” технологије “Мicrosoft” са седиште у граду Редмонд у америчкој савезној држави Вашингтон, најавла је</p>
      <div class="submit-btn">
        <a href="https://geostrateg.com/nauka/stize-azururiranje-za-windows-10/" class="read-more">Сазнај Више</a>
      </div>
    </div>
  </article>
  <article class="popular_posts">
    <div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/09/9_114950d1-min.jpg');">
    </div>
    <div class="grid-date">
      <span class="day"> 30</span>
      <span class="month"> Sep</span>
    </div>
    <div class="post-container">
      <h2> РУСКИ МОРСКИ ДУХ </h2>
      <p>Гоестратег први пут у рубрици “Војска и наоружање” посвећује пажњу једном систему морнарице. У питању је нова руска “невидљива и</p>
      <div class="submit-btn">
        <a href="https://geostrateg.com/naoruzanje/ruski-morski-duh/" class="read-more">Сазнај Више</a>
      </div>
    </div>
  </article>
</div>

remove `align-items: center;` from `div.recent-wrapper.container` — Rainbow, Oct 21 '18 at 11:06
I added to example from the link to your question, because each question MUST include a [mcve] in the question body itself — Alon Eitan, Oct 21 '18 at 11:08
@connexo I never notice the small `tidy` button there up until now, will do it in future :) — Alon Eitan, Oct 21 '18 at 11:13

score 1 · Accepted Answer · answered Oct 21 '18 at 11:30

The problem is that you are using align-items:center which tries to align your 3 articles center vertically. And because your elements are not equal in height ( post-container height differs) they are aligned vertically in the center of your container but they are not 'equalized' in height.

Remove align-items:center and you will be ok.

If you want to align horizontally use justify-content:center. Keep in mind that the direction ( row/column ) changes the XY axes. Read more here -> align-items / justify-content

See result in snippet below or jsFiddle

.recent-wrapper.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  /*align-items: center; */
  padding: 50px 50px 40px 50px;
}

.post-image {
  width: 100%;
  height: 250px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #999;
}

article.popular_posts {
  min-width: 250px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  margin: 20px 1%;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.grid-date {
  background-color: rgb(237, 43, 71);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  min-height: 48px;
  min-width: 48px;
  padding: 5px 10px;
  position: absolute;
  right: 15px;
  text-align: center;
  text-transform: uppercase;
  top: 0;
}

.post-container {
  width: 100%;
  padding: 5px 10px 10px 10px;
  margin-bottom: 5px;
  text-align: left;
}

<div class="recent-wrapper container">
  <article class="popular_posts">
    <div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/f-16-min.jpg');">
    </div>
    <div class="grid-date">
      <span class="day"> 07</span>
      <span class="month"> Oct</span>
    </div>
    <div class="post-container">
      <h2> Ф-16 Блок 70/72 “ПОСЛЕДЊИ ФАЛКОН” </h2>
      <p>Захваљујући уговорима о куповини вишенаменског борбеног авиона Ф-16”Figthing Falcon”&nbsp; БЛОК 70/72&nbsp;који су са његовим призвођачем, америчком компанијом “Локид Мартин” потписали</p>
      <div class="submit-btn">
        <a href="https://geostrateg.com/naoruzanje/f-16-blok-70-72-poslednji-falkon/" class="read-more">Сазнај Више</a>
      </div>
    </div>
  </article>
  <article class="popular_posts">
    <div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/win-azur-featured.jpeg');">
    </div>
    <div class="grid-date">
      <span class="day"> 07</span>
      <span class="month"> Oct</span>
    </div>
    <div class="post-container">
      <h2> СТИЖЕ АЖУРУРИРАЊЕ за “WINDOWS 10” </h2>
      <p>Добре вести! Највећа светска корпорација “IT” технологије “Мicrosoft” са седиште у граду Редмонд у америчкој савезној држави Вашингтон, најавла је</p>
      <div class="submit-btn">
        <a href="https://geostrateg.com/nauka/stize-azururiranje-za-windows-10/" class="read-more">Сазнај Више</a>
      </div>
    </div>
  </article>
  <article class="popular_posts">
    <div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/09/9_114950d1-min.jpg');">
    </div>
    <div class="grid-date">
      <span class="day"> 30</span>
      <span class="month"> Sep</span>
    </div>
    <div class="post-container">
      <h2> РУСКИ МОРСКИ ДУХ </h2>
      <p>Гоестратег први пут у рубрици “Војска и наоружање” посвећује пажњу једном систему морнарице. У питању је нова руска “невидљива и</p>
      <div class="submit-btn">
        <a href="https://geostrateg.com/naoruzanje/ruski-morski-duh/" class="read-more">Сазнај Више</a>
      </div>
    </div>
  </article>
</div>

one more quick question, how could i put .submit-btn always at the end of my post-container, I just think with position relative but is there any way use flex ?? — Loki, Oct 21 '18 at 11:44

Flex items of same height

1 Answers1