Flexbox Layout Justify Content

Question

It seems such a simple scenario in my head.

I have a container div that has two child elements, the first of which should appear in the top left corner, and the second should appear dead central.

I've tried to use space-between when using the the justify-content property of Flex on the container.

This splits the content into the top-left and top-right corners.

The element in the top-right corner needs to pull-left until it is dead central.

I can't think of a way to achieve this.

I don't want to make a third hidden element, as that seems like a hack.

#container {
  display: flex;
  justify-content: space-between;
}

<div id="container">
  <div>TOP LEFT</div>
  <div>DEAD CENTER</div>
</div>

Chiller · Accepted Answer · 2017-06-21T09:38:09.573

Just add width: 50%; to the container and you are good to go

#container {
  display: flex;
  justify-content: space-between;
  width: 50%;
}

<div id="container">
  <div>TOP LEFT</div>
  <div>DEAD CENTER</div>
</div>

And if you want the second item to be exactly in the center add transform:translateX(50%);, this will move it according to its width

#container{
  display:flex;
  justify-content: space-between;
  width: 50%;
}

#container div:nth-child(2){  
  transform:translateX(50%);
}

<div id="container">
  <div>TOP LEFT</div>
  <div>DEAD CENTER</div>
</div>

Flexbox Layout Justify Content

1 Answers1