Flexbox move div to the right without affect other divs

Question

I'm trying to achieve a similar alignment to this with flexbox.

Note: The two middle divs are supposed to be centered and the sizes are mostly irrelevant.

I tried setting the flex container with justify-content: center and the last child div with margin-left: auto but it just moves the other 2 divs far to the left.

Any way to achieve this layout?

A margin-left: auto on the first one, gets closer - but not exact! What is the use case? I see this question asked often in the CSS Discord. — sheriffderek, Oct 02 '21 at 05:36
@sheriffderek https://cdn.discordapp.com/attachments/392865176455610369/893733880622907462/unknown.png something like this. Except the 3 dots would be all the way to the right. — Wright, Oct 02 '21 at 05:39
When I've seen this question asked before, it was strict! And no other markup could be added. I've worked through it a few times... but I think we always came to a somewhat hacky solution. If the goal is to have flexbox do this perfectly, then I'm still not sure. But - I have seen people put a div on the left - and use it to balance it and then hide it... : / — sheriffderek, Oct 02 '21 at 05:55

score 4 · Answer 1 · edited Oct 02 '21 at 11:59

I would put the two boxes insides their own container div with display: flex; and then justify-content: center; and width: 100%; for the inner container.

Here's a codepen.io snippet for implementing the same: https://codepen.io/yagyagaire/pen/YzQMeGN

.container {
   display: flex;
}

.container__sub {
   justify-content: center;
   width: 100%
}

.green-box {
   width: 100px;
   height: 100px;
   background-color: green;
   border: 5px solid black;
}

<!-- HTML5 layout -->
<div class="container container__main">
  <div class="container container__sub">
    <div class="green-box">    </div>
    <div class="green-box">    </div>
  </div>
  <div class="green-box">
  </div>
</div>

score 0 · Answer 2 · answered Oct 02 '21 at 05:12

I can't tell what sizes your green squares are, whether they're supposed to all be the same width, or whether those green center squares are perfectly centered, but this is one way.

.container {
  display: flex;
  background: pink;
  justify-content: center;
}

.container > div {
  background: green;
  height: 50px;
  display: block;
  border-left: 1px solid #e2e2e2;
  width: 20%;
}

.container > div:nth-child(1),
.container > div:nth-child(3) {
  margin-left: 20%;
}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

If you wanted to have the green boxes dead center, and the end green box floating to the right, you could use position: absolute; which may do what you want it to (I know you wanted to use flexbox though).

.container {
  display: flex;
  background: #e2e2e2;
  justify-content: center;
}

.container > div {
  background: green;
  height: 50px;
  display: block;
  border: 1px solid #e2e2e2;
  width: 20%;
}

.container > div:nth-child(3) {
  position: absolute;
  right: 0;
  width: 10%;
}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

The second one is what I'm looking for, in the sense that the two green boxes are in the middle and the other one floating to the far right. However, trying the code puts the last element outside the containing div. — Wright, Oct 02 '21 at 05:29
The absolute position will pull it out of the document flow. — sheriffderek, Oct 02 '21 at 05:37
Setting `position: relative` on the containing div will fix that. — ray, Oct 02 '21 at 05:44
well, it will still be out of the flow. Which isn't necessarily a problem. But if the question is a purist flex-box question, then it might not be the right answer. So far, it's probably what I'd end up doing though... or something like this: https://jsfiddle.net/sheriffderek/ek7s9axw/ — sheriffderek, Oct 02 '21 at 05:51

score 0 · Answer 3 · answered Oct 02 '21 at 05:38

I think this is what you want. As you said I only used flexbox to achieve this.

.box{
  height:80px;
  width:80px;
  background:green;
  display:flex;
  justify-content:center;
  align-items:center;
  border:2px solid black;
}
.div1{
  flex:1;
}
.div2{
  flex:1;
}
.wrapper{
  display:flex;
  justify-content:center;
  background:rgba(0,0,0,0.5);
}
.box1{
  float:right;
}
.wrapper2{
  display:flex;
  justify-content:space-between;
}

<div class="wrapper">
  <div class="div1">
  <div class="box box1">
    box1
  </div>
  </div>
  <div class="wrapper2 div2">
    <div class="box">box2</div>
    <div class="box box3">box3</div>
  </div>
</div>

Flexbox move div to the right without affect other divs

3 Answers3