Выравнивание изображений с помощью flexbox

Question

Я пытаюсь выровнять эти изображения с помощью флексбокса, вот так ..

В настоящее время изображения выглядят так ..

Я попытался использовать 'align-self', примененный к элементам, которые должны находиться в нижнем ряду, однако он не сильно двигался.

Это то, что у меня сейчас есть:

.clover-items {
    margin: 0;
    padding: 0 5%;
    display: flex;
    justify-content: space-around;
}
.clover-items .clover-items__container {
    display: flex;
    align-items: center;
}

<div class="clover-items">
    <div class="clover-items__container">
        <img src="assets/images/cart_icon.png" alt="">
        <h4 class="icon_title">Over 100 business apps</h4>

        <img src="assets/images/check_mark_icon.png" alt="">
        <h4 class="icon_title">Real time reporting</h4>

        <img src="assets/images/check_icon.png" alt="">
        <h4 class="icon_title">Fast access to funds</h4>

        <img src="assets/images/lock_icon.png" alt="">
        <h4 class="icon_title">Card data is secure</h4>

        <img src="assets/images/person_icon.png" alt="">
        <h4 class="icon_title">U.S. Based 24/7 customer service</h4>
    </div>
</div>

Answer 1

Это сложный макет с flexbox, потому что после активации wrap элементы могут обернуться в любое время.Таким образом, даже если вы достигнете желаемого макета на одном экране, он может сломаться на меньших экранах.Это можно сделать, но вам нужно существенно изменить HTML.

Вот демонстрационная версия с небольшим изменением HTML (вложенные контейнеры).Макет работает на широких экранах, но не работает на маленьких экранах. jsFiddle demo

Вот простое решение с помощью CSS Grid: jsFiddle demo

.clover-items__container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: "top-one top-one top-one top-two top-two top-two"
               "bottom-one bottom-one bottom-two bottom-two bottom-three bottom-three";
}

.clover-items__container > div:nth-child(1) { grid-area: top-one; }
.clover-items__container > div:nth-child(2) { grid-area: top-two; }
.clover-items__container > div:nth-child(3) { grid-area: bottom-one; }
.clover-items__container > div:nth-child(4) { grid-area: bottom-two; }
.clover-items__container > div:nth-child(5) { grid-area: bottom-three; }

.clover-items__container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 10px;
  border: 1px dashed red;
}

.clover-items__container > div > h4 {
  margin: 0 0 0 5px;
}

<div class="clover-items__container">
  <div>
    <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
    <h4 class="icon_title">Over 100 business apps</h4>
  </div>
  <div>
    <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
    <h4 class="icon_title">Real time reporting</h4>
  </div>
  <div>
    <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
    <h4 class="icon_title">Fast access to funds</h4>
  </div>
  <div>
    <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
    <h4 class="icon_title">Card data is secure</h4>
  </div>
  <div>
    <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
    <h4 class="icon_title">U.S. Based 24/7 customer service</h4>
  </div>
</div>

Answer 2

Это можно сделать с помощью flex-wrap:wrap;

https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

Если вы установите padding или margin для первых двух изображений и примените свойство flex-wrap, это может быть выполнено.