Flexbox，换行和拉伸 [英] Flexbox, line break and stretching

问题描述

这是关于flexbox的.我有一个宽度为150px的盒子.在此框内有一个文本和一个图标.我希望它们向左对齐.

问题是，当需要换行时，项目将平均分配.

 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.stack.imgur.com/EBUGw.png" />
    </ul> 

我想换行，但不填水平空间.有什么办法可以通过此标记实现这一目标?

解决方案

如果我正确理解您的图像，则希望带有数字的红色框仅采用适合其内部数字的大小.您可以这样做:

li {
  span {
    flex: 0;
  }
}

这意味着元素将不会增长以适应空白空间.在此处查看有关 flex-grow

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.stack.imgur.com/EBUGw.png" />
    </ul>

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

解决方案

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

这篇关于Flexbox，换行和拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！