Html 如何使用flexbox制作项目堆栈

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

在这里，您可以看到我迄今为止所做的工作：

或者在这个代码片段中

。产品说明{
文本对齐：左对齐；
最大宽度：400px；
}
.产品说明\uuuu项目{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.产品描述\uuuu图标-容器{
宽度：100px；
填充物：红色；
}
.产品说明\标题{
字号：1.325em；
字体大小：粗体；
颜色：红色；
}

圆形图标
优势安全平衡
告别纸质支票和透支费。
圆形图标
优势加成
更多的控制，更多的选择，更多的方式来免除每月的费用。
圆形图标
优势关系
您在Plus设置中获得的一切，以及额外的津贴和服务。

尝试以下方法：

基本上，如果在标题、描述和链接周围放置一个容器，它会将svg和容器转换为原始flex容器的flex项。然后，取下

flex-wrap:wrap规则

结果是文本与svg保持在一个单独的列中。使用一些CSS使SVG变小，您将很容易获得所需的设计

<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="container">
      <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>
  <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="container">
      <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>
  <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="container">
    <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>
</div>

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

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

如果要包括旧的浏览器，您应该使用“显示网格”或“绝对”，因为演示没有很好地演示解决方案，因为它只有一个项目。此外，由于这是一个CSS问题，您的答案中的代码肯定应该包含CSS，而不仅仅是HTML。
.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;
  }
}