CSS Flex布局下，动态宽度Flex项的相对外边距如何计算？

首先，核心思路是利用CSS百分比或calc()函数来实现相对定位，完全不需要依赖JavaScript获取动态宽度——因为百分比是相对于父元素（.hour）的宽度计算的，而.hour的宽度由flex-grow:1自动分配，百分比会自动适配这个动态宽度，完美解决你没法直接获取.hour宽度的痛点。

方案1：直接用calc()计算比例 #

每个小时固定是60分钟，所以任何分钟数占小时的比例都可以用 分钟数/60*100% 来表示，直接写在CSS里就能实现响应式的边距和宽度。

修改后的代码示例： #

<div className="row" style={{display: "flex"}}>
  <!-- 代表8点的小时容器 -->
  <div className="hour" style={{ flexGrow: 1, display: "flex", backgroundColor: "white" }} >
    <!-- 8:00-8:20的事件 -->
    <div className="event" style={{
      flexBasis: "calc(20/60*100%)", /* 事件宽度占小时的20/60 */
      flexGrow: 0, /* 禁止自动扩展，严格保持比例 */
      backgroundColor: "#e3f2fd"
    }}></div>
    <!-- 8:20-8:40的事件 -->
    <div className="event" style={{
      marginLeft: "calc(20/60*100%)", /* 左边距占小时的20/60 */
      flexBasis: "calc(20/60*100%)",
      flexGrow: 0,
      backgroundColor: "#bbdefb"
    }}></div>
  </div>
  <!-- 其他23个小时容器... -->
</div>

方案2：用CSS变量增强灵活性 #

如果未来需要调整时间段（比如支持30分钟的区块），可以用CSS变量封装分钟数，让代码更易维护，也更具扩展性：

代码示例： #

<div className="row" style={{display: "flex"}}>
  <div className="hour" style={{ 
    flexGrow: 1, 
    display: "flex", 
    backgroundColor: "white",
    "--total-minutes": "60" /* 定义小时总分钟数的变量 */
  }} >
    <!-- 8:00-8:20的事件 -->
    <div className="event" style={{
      "--start-minutes": "0",
      "--duration-minutes": "20",
      marginLeft: "calc(var(--start-minutes)/var(--total-minutes)*100%)",
      flexBasis: "calc(var(--duration-minutes)/var(--total-minutes)*100%)",
      flexGrow: 0,
      backgroundColor: "#e3f2fd"
    }}></div>
    <!-- 8:20-8:40的事件 -->
    <div className="event" style={{
      "--start-minutes": "20",
      "--duration-minutes": "20",
      marginLeft: "calc(var(--start-minutes)/var(--total-minutes)*100%)",
      flexBasis: "calc(var(--duration-minutes)/var(--total-minutes)*100%)",
      flexGrow: 0,
      backgroundColor: "#bbdefb"
    }}></div>
  </div>
</div>

为什么这两种方案靠谱？ #

• 百分比单位在CSS中是相对于父元素宽度计算的，不管.row的整体宽度怎么变，.hour的动态宽度都会被百分比自动适配，完全不需要手动计算像素值。
• 用flexBasis代替width更符合Flex布局的逻辑，配合flexGrow:0可以确保事件元素不会被意外拉伸，严格按照你需要的时间比例显示。

不推荐的方案：JavaScript计算像素 #

如果非要用JS获取.hour宽度再计算marginLeft，你需要：

1. 获取.hour的offsetWidth
2. 计算marginLeft = (startMinutes/60) * offsetWidth
3. 监听窗口resize事件，在宽度变化时重新计算

但这种方案需要额外的JS逻辑，而且响应式适配的流畅度远不如CSS原生方案，所以优先推荐前面的CSS方案。

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