Flexbox：換行和空間的使用

Question

在這里，我有一個水平的項目列表。

我使用了彈性盒。 因為我希望項目只占用左邊必要的空間，所以我使用display: flex和在 children flex: 0; ，就像在Flexbox 中一樣，換行和拉伸。

 ul { display: flex; padding: 0; width: 320px; list-style-type: none; outline: 4px solid turquoise; } li { display: flex; align-items: center; flex: 0; box-sizing: border-box; outline: 1px solid lightgray; } span { flex: 0; outline: 1px solid tomato; } .svg { height: 12px; width: 12px; outline: 1px solid green; } svg { display: block; }

 <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="">3456789 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="">1234 56789 123456 78</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> </ul>

如您所見，這里的問題是，如果文本內容有空格，則 flexbox 將創建一個分隔線，而不會嘗試使用剩余空間。 我想實現這樣的目標：

有沒有可能解決這個問題？

Answer 1

給你的li sa 風格的white-space: pre和你的ul display: inline-flex ：

 ul { display: inline-flex; padding: 0; list-style-type: none; outline: 4px solid turquoise; } li { display: flex; align-items: center; flex: 0; box-sizing: border-box; outline: 1px solid lightgray; white-space: pre; } span { flex: 0; outline: 1px solid tomato; } .svg { height: 12px; width: 12px; outline: 1px solid green; } svg { display: block; }

 <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="">3456789 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="">1234 56789 123456 78</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> </ul>