Center a flex item when it is an only child

Question

I have a flex container that can contain one or more elements.

If there is more than one element I want to justify content using space-between

justify-content: space-between;

If there is only one element I want it to be centered.

Example codepen

Is this possible using only CSS?

Answer 1

Yes. The flexbox specification makes this possible.

.flex {
  display: flex;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid red;
  justify-content: space-between;
}

a:only-child {
  margin: 0 auto;
}

<div class="flex">
  <a>item 1</a>
  <a>item 2</a>
</div>
<div class="flex">
  <a>item 1</a>
</div>

From the spec:

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.

So, basically, use justify-content on the parent and an auto margin on the child.

Per the rule above, the auto margin takes precedence when the only-child selector applies.

Answer 2

This is the answer

.flex {
    display: flex;
    justify-content: space-between;

    & > *:only-child {
        margin: auto;
    }
}