Flexbox row center one item and not the other

Question

I am trying to center one item with flexbox, the one in blue. And the item in red should not be centered but simply be aligned to the right of the blue item. How to do this?

.container {
  display: flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center;
}

.box.right-item {
  background: red;
  width: 200px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px;  
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

see the second snippet here: https://stackoverflow.com/a/55393886/8620333 (there is 3 element but you can consider one of them empty and you have what you want) — Temani Afif, Jul 12 '20 at 12:21

score 1 · Accepted Answer · answered Jul 12 '20 at 11:43

Just use margin-left: calc(50% - 100px); for .box.left This centers the blue box.

.container {
  display: flex;
  flex-direction: row; 
  align-items: center;
}

.box.right-item {
  background: red;
  width: 200px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px; 
  margin-left: calc(50% - 100px);
  /*                        ↑ half of the width */
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

score 0 · Answer 2 · answered Jul 12 '20 at 11:38

This is a little bit tricky to do but you could do a few workarounds like make the second box's position absolute so that it's really just the blue box being centered - or what I think would be a simpler elegant solution - just give the blue box a left margin the size of the red box -

.container {
  display: flex;
  flex-direction: row; 
    justify-content: center;
  align-items: center;
}

.box.right-item {
  background: red;
  width: 200px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px;  
  margin-left:200px;
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

score 0 · Answer 3 · answered Jul 12 '20 at 11:41

If you want to center the blue item while keeping justify-content: center, you'll need to shift the center point by positioning both items 100px to the right of their original position, which translates to adding position: relative; left: 100px; to both item. Or, you could try using margin-left.

There's no direct way to center 1 item and at the same time push the other to the end. You could do it with grid, but for flex, above will work.

.container {
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center;
}

.box.right-item {
  background: red;
  width: 200px;
  position: relative;
  left: 100px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px;
  position: relative;
  left: 100px;
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

score -1 · Answer 4 · answered Jul 12 '20 at 11:37

Although your question is not quite clear, here is what I make from your question - If you are trying to center things inside your blue-box on left, you will have to add display properties for that container too. Here I am using flexbox as you might be familiar with it.

the modified class will be like this -

.box.left {
  background: blue;
  width: 200px;
   display: flex;
   justify-content: center;
  }

You don't need to add flex-direction as it is by default row.

You can run the following snippet below to check out

.container {
  display: flex;
  flex-direction: row; 
    justify-content: center;
  align-items: center;
}

.box.right-item {
  background: red;
  width: 200px;
}

.box.left {
  background: blue;
  width: 200px;
   display: flex;
   justify-content: center;
  }

<div class="container">
  <div class="box left">
 xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

Flexbox row center one item and not the other

4 Answers4