Using the flexbox use the justify-content space between

Asked Aug 12 '20 at 12:06

Active Aug 12 '20 at 12:13

Viewed 31 times

I have a html

    <div class={css.mainDiv}>
     <div class={css.marksContainer}></div>
     <div class={css.gradeContaner}</div>
     <div></div>
    </div>

So, Here I have a flex property.

    .mainDiv {
     display: flex;
     justify-content: space-between;
    }

Now, I have added a third div here to resolve an issue which was I want to have first two divs to be at start and middle place (row wise) and and third div which is empty.

But right now, what happens is first div is at start place and second div is at last place (space-betwween)

So Is there any solution to this ?

edited Aug 12 '20 at 12:13

ppwater

2,304
4
14
29

asked Aug 12 '20 at 12:06

ganesh

you will simply get banned if you keep repeating the same question (https://stackoverflow.com/q/63375141/8620333) – Temani Afif Aug 12 '20 at 12:11
Just use flex-basis: 33% on mainDiv > *. You can then delete the third flex. – CptKicks Aug 12 '20 at 12:11
@TemaniAfif could you please give me the answer of the question. It would be helpful. – ganesh Aug 12 '20 at 12:12
I already gave you two duplicate that will give you the answer, simply read them – Temani Afif Aug 12 '20 at 12:14
I tried the solutions but does not work.. Thank you for the reply – ganesh Aug 12 '20 at 12:15
you edit your question to show what is not working, you don't add another question – Temani Afif Aug 12 '20 at 12:16
okay thank you. Answer would have been really great... But yeah thank. you very much for the suggestions.Delete the question. – ganesh Aug 12 '20 at 12:20
Solution has already been given by @CptChix. Just use flex: 1 1 33.33% or flex: 0 0 33.33% on mainDiv > *. – mttetc Aug 12 '20 at 12:23

Using the flexbox use the justify-content space between

0 Answers0