CODEWITHSUNDEEP
htmlcssflexbox
user12085478
user12085478

Reputation:

Flexbox, line break and stretching

This is about flexbox. I have a box of 150px width. Inside this box there is a text, and an icon. I want them to align to the left.

The issue is that when there is needed a line-break, the items are distributed evenly.

li {
        width: 150px;
        box-sizing: border-box;
        border: 3px solid lightgray;
        align-items: center;
        justify-content: flex-start;
        display: flex;
        margin-bottom: 10px;
      }
      span {
        display: inline-block;
        outline: 1px solid tomato;
        justify-content: flex-start;
      }
      .svg {
        height: 12px;
        width: 12px;
        display: inline-block;
        outline: 1px solid green;
      }
      svg {
        display: block;
      }
      img {
        width: 150px;
      }
<ul>
      <li>
        <span>
          <a href="">123456789</a>
        </span>
        <div class="svg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
              d="M7 0a.998.998 0 0 1 .74.327l10 11a1 1 0 0 1 0 1.346l-10 11a1 1 0 0 1-1.48-1.346L15.648 12 6.26 1.673A1 1 0 0 1 7 0z"
            ></path>
          </svg>
        </div>
      </li>
      <li>
        <span>
          <a href="">123456789 123456</a>
        </span>
        <div class="svg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
              d="M7 0a.998.998 0 0 1 .74.327l10 11a1 1 0 0 1 0 1.346l-10 11a1 1 0 0 1-1.48-1.346L15.648 12 6.26 1.673A1 1 0 0 1 7 0z"
            ></path>
          </svg>
        </div>
      </li>
      <li>
        <span>
          <a href="">123456789 12345678</a>
        </span>
        <div class="svg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
              d="M7 0a.998.998 0 0 1 .74.327l10 11a1 1 0 0 1 0 1.346l-10 11a1 1 0 0 1-1.48-1.346L15.648 12 6.26 1.673A1 1 0 0 1 7 0z"
            ></path>
          </svg>
        </div>
      </li>
      
      <div>I want this —this is an image—</div>
      <img src="https://i.sstatic.net/EBUGw.png" />
    </ul>

I want the line break, but not fill the horizontal space. Is there any way to achieve this with this markup?

Upvotes: 2

Views: 352

Answers (1)

Mario F
Mario F

Reputation: 47279

If I understand correctly your image, you want the red box with the numbers to only take the size that it needs to fit the numbers inside. You could accomplish that by doing:

li {
  span {
    flex: 0;
  }
}

that means that the element won't grow to fit empty space. See more about flex-grow here

Upvotes: 1

Related Questions