html - 如何使用 flexbox 制作一堆元素

Question

我正在努力实现这样的目标:

在这里你可以看到我到目前为止所做的:https://codepen.io/maketroli/pen/aaNezK

或者在这段代码中

.product-descriptions {
  text-align: left;
  max-width: 400px;
}
.product-descriptions__item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.product-descriptions__icon-container {
  width: 100px;
  fill: red;
}
.product-descriptions__title {
  font-size: 1.325em;
  font-weight: bold;
  color: red;
}

<div class="product-descriptions">
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="product-descriptions__title">Advantage SafeBalance</div>
    <div class="product-descriptions__description">Say goodbye to paper checks—and to overdraft fees.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="0">
                                See details
                            </a>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="product-descriptions__title">Advantage Plus</div>
    <div class="product-descriptions__description">More control, more options, more ways to waive the monthly fee.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="1">
                                See details
                            </a>
  </div>
  <div class="product-descriptions__item">
    <div class="product-descriptions__icon-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" aria-hidden="true" focusable="false">
    <title>icon_circleplus</title>
    <g>
        <path d="M50.66,4.76a30.71,30.71,0,1,0,30.7,30.7,30.71,30.71,0,0,0-30.7-30.7M66.55,38.87H54.06V51.35H47.25V38.87H34.76V32.06H47.25V19.57h6.81V32.06H66.55Z"></path>
    </g>
</svg>

    </div>
    <div class="product-descriptions__title">Advantage Relationship</div>
    <div class="product-descriptions__description">Everything you get with the Plus setting along with extra perks and services.</div>
    <a id="" class="product-descriptions__link" href="#" data-index="2">
                                See details
                            </a>
  </div>
</div>

我还应该做些什么来实现我的需要？

Answer 1

我在您的示例中看到的最大区别是图标太大。我把它们缩小了一点，把标题放大了一点。从那里开始玩边距，让它看起来更像你的例子，看起来你非常接近。这是我的代码:

.product-descriptions {
  max-width: 400px; // To simulate Mobile

  &__item {
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  &__icon-container {
    width: 50px;
    fill: red;
  }

  &__title {
    font-size: 1.4em;
    font-weight: bold;
    color: red;
    margin-top: 4px;
    margin-left: 10px;
  }

  &__description {
    margin-left: 60px;
    width: 240px
  }

  &__link {
    margin-left: 60px;
    margin-bottom: 30px;
    margin-top: 8px;
    text-decoration: none;
  }
}