如何利用Flex布局为li下的所有span元素设置等宽？

嘿，我看了你的代码，问题出在你只给li加了flex布局，但没给它下面的span元素设置平分宽度的规则。别担心，只需要两处小修改就能实现你要的效果：

首先，确保所有需要实现等宽span的li都启用flex布局（你现在只有第一个li加了类，第二个li也得安排上）；然后给每个span设置flex: 1属性，这样它们就会自动平分父容器（li）的宽度。

下面是修改后的完整代码：

修改后的HTML代码 #

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<title>JS Bin</title> 
</head> 
<body> 
<div> 
<ul class="results_table_ul"> 
<li class="results_table_li"> 
<span >1</span><span>2</span><span>4</span><span>5</span><span>55</span> 
</li> 
<li class="results_table_li"> 
<span >8</span><span>0</span><span>8</span><span>44</span><span>56</span> 
</li> 
</ul> 
</div> 
</body> 
</html>

修改后的CSS代码 #

body{ margin:0; padding:0; } 
ul { list-style:none } 
.results_table_ul { 
  display: flex; 
  flex-direction: column; /* 让li垂直排列，保持列表原有结构 */
} 
.results_table_li { display: flex; } 
.results_table_li span {
  flex: 1; /* 核心属性：让每个span平分li的宽度 */
  text-align: center; /* 可选：让内容居中，视觉更整齐 */
  border: 1px solid #eee; /* 可选：加边框方便直观看到等宽效果 */
}

原理说明： #

flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的简写，它告诉每个span元素：

• flex-grow:1：如果父容器有剩余空间，每个span会按相同比例分配剩余宽度
• flex-shrink:1：如果空间不足，每个span会按相同比例缩小
• flex-basis:0%：让元素的基准宽度为0，这样平分的是父容器的总宽度，而非基于内容宽度分配

另外我给ul加了flex-direction: column，确保li保持垂直排列的列表结构；边框和居中样式是可选的，主要帮你更直观地看到每个span的宽度确实相等。

内容的提问来源于stack exchange，提问作者naveen