How to add justify-content:space between only to 2nd and 3rd child

Question

Is it possible to add justify-content: space-between only to 2nd and 3rd child of a div? I don't want to make another parent around them, because that will broke my previous style. I need to have structure like this:

.wrapper{
     display: flex;
}

<div class="wrapper">
    <div class="container-1">content 1</div>
    <div class="container-2">content 2</div>
    <!-- add space here -->
    <div class="container-3">content 3</div>
</div>

And my final result needs to look like this:

Maybe using nth child or something like that?

score 2 · Accepted Answer · edited Aug 31 '23 at 07:15

2

.wrapper{
     display:flex;
}

.container-3{
     margin-left: auto;
}

<div class="wrapper">
    <div class="container-1">content 1</div>
    <div class="container-2">content 2</div>
    <!-- add space here -->
    <div class="container-3">content 3</div>
</div>

This css will push your container-3 to the right and add available space in between

edited Aug 31 '23 at 07:15

Skar

333
2
11

answered Aug 30 '23 at 08:09

Nguyen Thanh

127
2

Yeah, that's it – Skar Aug 30 '23 at 08:11

How to add justify-content:space between only to 2nd and 3rd child

1 Answers1