CODEWITHSUNDEEP
htmlcssflexbox
Non
Non

Reputation: 8589

How to use flexbox to make a stack of items

I am trying to achieve something like this:

enter image description here

Here you may see what I've done so far: https://codepen.io/maketroli/pen/aaNezK

Or in this code snippet 

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

What else should I do to achieve what I need?

Upvotes: 0

Views: 70

Answers (2)

qotsa42
qotsa42

Reputation: 317

Try something like this:

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

Basically, if you put a container around your title, description, and link, it turns the svg and the container into flex items of your original flex container. Then, take remove the flex-wrap: wrap; rule.

The result is that the text stays in a separate column from the svg. Use some CSS to make the SVG smaller and you'll get your desired design pretty easily. 

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

Edited to include the 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;
}

Upvotes: 0

Lauren Reilly
Lauren Reilly

Reputation: 93

Biggest difference I saw in your example were the icons being too large. I sized them down a bit and scaled the titles up a little. From there played around with the margins to get it looking more like your example, seems like you were very close. Heres my code:

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

Upvotes: 1

Related Questions