Flex布局为何无法按设置的百分比占比分配Div宽度？

嘿，我来帮你捋捋这个问题——其实是两个小细节搞砸了你的布局，咱们一步步拆解：

1. 你用错了「宽度属性」的写法 #

你给每个<div class="season">加的是HTML原生的width属性（比如width="47.150002%"），但这个属性在现代CSS布局里优先级极低，浏览器根本不会把它当成元素的布局宽度来解析。咱们控制元素宽度得用CSS的width样式，要么写在style属性里，要么定义在CSS规则中。

2. flex: none的作用需要配合正确的宽度设置 #

你给.season设置了flex: none，这个属性等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto;——意思是这个flex子项完全不会伸缩，宽度只由「自身CSS宽度」或者「内容宽度」决定。因为你没给它设置CSS宽度，所以它就默认缩到内容的宽度了。

修正后的代码示例 #

把HTML里的width属性移到style里，同时可以保留flex: none（或者改成flex: 0 0 auto，效果一致），另外建议去掉justify-content: space-between——这个属性会在子项间添加空白，反而会破坏你要的百分比占比布局：

html, body { margin: 0; padding: 0; }
div.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* 去掉justify-content: space-between，避免子项间出现额外空白 */
}
div.season {
  flex: none; /* 保持子项不伸缩，宽度由CSS width决定 */
}

<div class="container">
  <div class="season" style="background-color:rgb(156, 203, 205); width:47.150002%;"> winter </div>
  <div class="season" style="background-color:rgb(160, 201, 166); width:19.520000%;"> summer_heat </div>
  <div class="season" style="background-color:rgb(192, 204, 157); width:26.639997%;"> fall </div>
  <div class="season" style="background-color:rgb(156, 203, 205); width:6.690001%;"> winter </div>
</div>

这样修改后，每个季节区块就会严格按照你设置的百分比宽度占据容器空间，完美实现你要的时间分布单行图表效果～

内容的提问来源于stack exchange，提问作者Tomáš Zato