如何在css中的flex-item中创建相对保证金？

Question

我div {display: flex}。它包含24个元素（一天中的小时，一个div是一小时）。 24个元素中每个元素的宽度都是响应的：{flex-grow:1}

每小时都包含一些事件。每个事件都有startTime和endTime。例如，我的事件从8.00开始，结束于8.20：

简化代码：

<div className="row" style={{display:flex}}>
    <div className="hour" 
        style={{
            flexGrow: 1, 
            display: flex; 
            backgroundColor: white
        }}
    >
        <div className="event" style={{flex-grow: durationInMinutes/60}}>
        </div>
    </div>
</div>

如您所见，我在这里使用相对宽度，因此事件以正确的比例显示。

但是，例如，我的活动从8:20开始，到8.40结束。这意味着我需要移动<div className="event">，例如{marginLeft: 20px * someСoefficient}，其中someCoefficient是widthOfHourDiv/60但我不知道<div className="hour">的宽度，因为我写了{ {1}}以上。

如何计算marginLeft？

Answer 1

我建议您使用flex-basis（或width），因为您可以使用flex-grow和{0}来使用0％到100％之间的值而不是0到1之间的值可以将margin-left视为空事件的宽度，而不是事件之前，因此您可以使用相同的计算来查找其值。

这也适用于许多事件：

.hour {
  width: 120px;
  border: 1px solid;
  display: flex;
  height: 60px;
  margin-bottom:10px;
}

.event {
  background: red;
}

event1 : from 8:20 to 8:30<br>
length: (30-20)=10min --> (10/60)*100 = 16.67%<br>
margin-left:20min --> (20/60)*100 = 33.33%
<hr>
event2 : from 8:35 to 8:50<br>
length: (50-35)=15min --> (15/60)*100 = 25%<br>
margin-left: (35-30)=5min --> (5/60)*100 = 8.33%
<div class="hour">
  <div class="event" style="flex-basis:16.67%;margin-left:33.33%;"></div>
  <div class="event" style="flex-basis:25%;margin-left:8.33%;"></div>
</div>
You can also consider width
<div class="hour">
  <div class="event" style="width:16.67%;margin-left:33.33%;"></div>
  <div class="event" style="width:25%;margin-left:8.33%;"></div>
</div>
You can use empty slot instead of margin
<div class="hour">
  <div style="width:33.33%;"></div>
  <div class="event" style="width:16.67%;"></div>
  <div style="width:8.33%;"></div>
  <div class="event" style="width:25%;"></div>
</div>

Answer 2

使用position：absolute并设置＆＃39; left＆＃39;属性为正确的百分比（8h20> 33％）

编辑：你需要设置小时div位置：relative