Center wenn nur ein einzelnes Element in der Flexbox

Question

Ich habe eine Flexbox-gesteuerte Fußzeile. Es kann 1,2 oder 3 untergeordnete divs enthalten.

.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> 

mit 2 oder 3 divs arbeitet die CSS oben fein:

• mit drei, links und Recht sind gerötet links und rechts und Mittel ist in der Mitte .
• mit 2 sie gespült links und rechts

Aber mit einer einzigen div ist linksbündig. Ich würde es vorziehen, würde es zentriert sein.

Wie kann ich die CSS anpassen, so dass im Falle eines einzelnen div es zentriert wird, während das Verhalten für 2 oder 3 divs Halte?

Answer 1

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

Answer 2

Sie können Ihre Einzelteile wachsen mit den verfügbaren Raum stellen Sie sicher, so dass ihr Inhalt relativ zu dem Element

.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>

Answer 3

befinden Wenn Sie die verwenden möchten Marge, nur um das zu tun, Marge anpassen, können Sie verwenden space-evenly, oder die Cross-Browser-Trick mit Pseudo-Elemente und Ihre bestehenden space-between

Stapel Schnipsel - pseudo + space-between

.footer { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 
.footer::before, .footer::after { 
 
    content: ''; 
 
}

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

Stapel Schnipsel - space-evenly (browser support)

.footer { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-evenly; 
 
}

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