html - 使用 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>

标签： htmlcssflexbox

Answer 1

这是一个带有 flexbox 的棘手布局，因为一旦wrap被激活，项目就可以随时换行。因此，即使您在一种屏幕尺寸上实现了您想要的布局，它也可能在较小的屏幕上中断。可以做到，但您需要大幅更改 HTML。

这是一个对 HTML（嵌套容器）稍作修改的演示。布局适用于宽屏幕，但在小屏幕上失败。jsFiddle 演示

这是一个使用 CSS Grid 的简单解决方案：jsFiddle 演示

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