Сгибать предметы одинаковой высоты

Question

У меня проблемы с флекс-элементами. Я пытаюсь создать флекс-контейнеры одинаковой высоты, но они не работают. Может, кто-нибудь сейчас решит проблему с флексом: 1 и другими свойствами, но он просто не работает? Вот мой пример кода.:

Образец макета

.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>

Answer 1

Проблема в том, что вы используете align-items:center, который пытается выровнять ваш центр 3 articles по вертикали.И поскольку ваши элементы не равны по высоте (post-container высота отличается), они выровнены по вертикали в центре вашего контейнера, но они не «выровнены» по высоте.

Удалите align-items:center, и вы будетехорошо.

Если вы хотите выровнять по горизонтали, используйте justify-content:center.Имейте в виду, что направление (строка / столбец) меняет оси XY.Подробнее здесь -> align-items / justify-content

См. Результат во фрагменте ниже или 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>