Question

我的代码和图像显示了问题：我想要具有相同百分比宽度的弹性项目，无论如何都不会扩展。打破长单词可以避免文本溢出，因此基本上不需要扩展任何项目。

尽管如此，在第二个示例中，包含非常长单词的项目被扩展了，尽管我希望 flex：0 0 25％; 会像 flex：0 0 auto;那样做。 ，并声明了单独的宽度：25％; -但显然不是。我在这里想念什么？

对于项数未知的情况，有没有一种方法可以在不声明百分比宽度的情况下实现？（当然，由于400px div，因此百分比宽度在此测试用例中没有意义，但最终所有宽度当然都将是灵活的，与视口宽度有关。）

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 16px/1.5 Arial, sans-serif;
  box-sizing: border-box;
}

body {
  padding: 20px;
}

p {
  padding: 40px 0 3px;
}

div {
  width: 400px;
  background: rgb(100, 100, 100);
  padding: 20px;
}

ul {
  display: flex;
}

li {
  background: rgb(222, 222, 222);
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

li+li {
  border-left: none;
}

ul#ul1 li {
  width: 25%;
  flex: 0 0 auto;
}

ul#ul2 li {
  flex: 0 0 25%;
}

<p>width: 25%;<br> flex: 0 0 auto;</p>

<div>
  <ul id="ul1">
    <li>hello</li>
    <li>hello</li>
    <li>helloworldhelloworldhelloworld</li>
    <li>hello</li>
  </ul>
</div>

<p>flex: 0 0 25%;</p>

<div>
  <ul id="ul2">
    <li>hello</li>
    <li>hello</li>
    <li>helloworldhelloworldhelloworld</li>
    <li>hello</li>
  </ul>
</div>

this image shows the problem

width与flex-basis：[width]-元素是否得到扩展？

0 个答案: