Как использовать 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;
  }
}

Answer 2

Попробуйте что-то вроде этого:

https://codepen.io/anon/pen/WgwVZj

По сути, если вы поместите контейнер вокруг заголовка, описания и ссылки, он превратит 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>

Отредактировано для включения CSS:

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

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

  &__icon-container {
    width: 60px; /* Changed to 60px */
    fill: red;
  }
  &__title {
    font-size: 1.325em;
    font-weight: bold;
    color: red;
  }
}

/* New CSS Here */
svg {
  width:50px
}

.product-descriptions__description {
 max-width:300px;
}