Center when only a single item in flexbox [duplicate]

Question

I have a flexbox-controlled footer. It can contain 1,2 or 3 subordinate divs.

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

With 2 or 3 divs, the css above works fine:

• with three, Left and Right are flushed left and right and Middle is in the middle.
• with 2 they are flushed left and right

But with a single div, it is left-justified. I would prefer it would be centered.

How can I adjust the css so that in the case of a single div it will be centered, while retaining the behaviour for 2 or 3 divs?

Answer 1

.footer > :only-child
{
    margin-left: auto;
    margin-right: auto;
}

Answer 2

you can make sure your items grow with the available space so their content will be located relatively to the item

.footer > div {
   flex-grow:1:
   text-align: center; // for example
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.footer > div {
 flex-grow:1;
 text-align:center; //for example
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>