使用flexbox

Question

我试图使用弹性框这样对齐这些图像..

目前图像看起来像..

我尝试使用＆＃39; align-self＆＃39;应用于需要位于底行的元素，但它没有移动太多。

这就是我目前所拥有的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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属性，则可以执行此操作。