23

I've the following HTML and CSS.

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

.container-box {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;
  margin:50px;
}

.box {
  background-color: #9009A0;
  height: 50px;
  width: 50px;
}

Which gives this layout:

CSS layout

The first layout for multiple items does what I expect, but how can I change the second to position the element in center as it only has one element?

See this codepen: https://codepen.io/dennismadsen/pen/oNvqjjV

dhrm
  • 14,003
  • 29
  • 108
  • 172

3 Answers3

25

For cases where you have one item in the container, you can use the :only-child pseudo-class.

Add this to your code:

.box:only-child {
  margin: 0 auto;
}


.container-box {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;
  margin: 50px;
}

.box {
  background-color: #9009A0;
  height: 50px;
  width: 50px;
}

.box:only-child {
  margin: 0 auto;
}
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
</div>

In such cases, flex auto margins will override justify-content because:

§ 8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

More about :only-child:

§ 6.6.5.10. :only-child pseudo-class

The :only-child pseudo-class represents an element that has no siblings. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

More about flex auto margins:

Also, to spotlight some interesting flex behavior, if you were using space-around instead of space-between, you wouldn't need auto margins.

Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
  • This doesn't work if there are elements in the container that are hidden with `display: none` – Grant Humphries Mar 10 '21 at 00:54
  • @GrantHumphries, that's right, because `display: none` doesn't remove the element as a sibling in the HTML. But there may be another solution. Post a demo here or a new question. – Michael Benjamin Mar 10 '21 at 01:36
2

For info, You could also use together :first-child and :last-child if you wanted to mind about very old browsers ;)

.container-box {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;
  margin: 50px;
}

.box {
  background-color: #9009A0;
  height: 50px;
  width: 50px;
}

.container-box .box:first-child:last-child {
  margin: 0 auto;
}
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
</div>
G-Cyrillus
  • 94,270
  • 13
  • 95
  • 118
0

Here is a different idea with only margin:

.container-box {
  width: 400px;
  display: flex;
  background-color: red;
  margin: 30px;
}

.box {
  background-color: #9009A0;
  height: 50px;
  width: 50px;
}

.box:first-child {
  margin-right: auto;
}

.box:last-child {
  margin-left: auto;
}
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
</div>

If you will have more than 3 elements you can add an extra rule

.container-box {
  width: 400px;
  display: flex;
  background-color: red;
  margin: 30px;
}

.box {
  background-color: #9009A0;
  height: 50px;
  width: 50px;
}

.box:not(:last-child):not(:first-child) {
  margin:auto;
}

.box:first-child {
  margin-right: auto;
}

.box:last-child {
  margin-left: auto;
}
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
</div>
Temani Afif
  • 211,628
  • 17
  • 234
  • 311