CODEWITHSUNDEEP
javascriptcssreactjsflexbox
Alexander Knyazev
Alexander Knyazev

Reputation: 2892

How to make relative margin in flex-item in css?

I have div with {display: flex}. it contains 24 elements (hours of day, one div is one hour). Width of every of 24 elements is responsive: {flex-grow:1}

Every hour contains some events. Every event have startTime and endTime. For example, I have event which starts at 8.00 and finishes at 8.20:

enter image description here

The simplified code:

<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>

As you can see, I use relative width here, so the event is displayed on the right scale.

But, for example, I have event which starts at 8:20 and finishes at 8.40. It means that I need to move <div className="event"> like {marginLeft: 20px * someСoefficient}, where someCoefficient is widthOfHourDiv/60 But I don't know the width of <div className="hour">, because I wrote flex-grow above.

What can I do to calculate marginLeft?

Upvotes: 0

Views: 218

Answers (2)

Temani Afif
Temani Afif

Reputation: 272648

I advise you to use flex-basis (or width) as you will be able to use values from 0% to 100% instead of values from 0 to 1 using flex-grow and you can consider the margin-left as the width of an empty event than comes before the event so you can use the same calculation to find its value.

This will also work with many events:

.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>

Upvotes: 1

Ji aSH
Ji aSH

Reputation: 3457

Use position: absolute and set the 'left' attribute to the correct percentage (8h20 > 33%)

edit: you need to set the hour div position: relative

Upvotes: 0

Related Questions