what is the best way to flex align two items right and one left

Question

This image given below is the result I am looking for.

So i have the html as follows

    <div class="container">
      <div class="content1">1</div>
      <div class="content2">2</div>
      <div class="content3">3</div>
    </div>

here container is set to display: flex I wanted to align the divs as follows. I can give justify-content: space-between but how to align the centre div closer to 3 with 10px distance from it

I have several containers which is aligned row by row. so, in the end, it should look like this as image shown below

I have given margin-left to div 2 but it doesn't order correctly with different div having different width

Multiple wasys can be used to achieve what you want. Here is another solution https://jsfiddle.net/b9wgaxo3/ — scooterlord, Dec 03 '19 at 14:11

score 2 · Accepted Answer · answered Dec 03 '19 at 08:58

You can add another div around the 2 on the right, and then use margin to create space around all of the div's

.container{
display:flex;
justify-content: space-between;
background: grey;
width: 400px;
height: 400px;
}
.content1,
.content2,
.content3{
background: green;
width: 50px;
height: 50px;
margin: 10px;
}
.align{
display:flex;
}

<div class="container">
      <div class="content1">1</div>
      <div class="align">
        <div class="content2">2</div>
        <div class="content3">3</div>
      <div>
    </div>

what is the best way to flex align two items right and one left

1 Answers1