フレックスボックス内の1つのアイテムだけの場合の中心

Question

フレックスボックスで制御されたフッターがあります。 1,2または3の下位divを含むことができます。

2つのまたは3 のdivで

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

、上記のCSSが正常に動作します：3と

• 、左と右は、左右フラッシュされ中東は真ん中にあります。彼らは

左右フラッシュされているが、単一 のdivと、それは左寄せされています。2と

私はそれが中心になることを好むだろう。 2つのまたは3 のdivのための行動を維持しながら、単一ののdivの場合には、それは、中央に配置されますように、私はCSSを調整することができますどのように

？

Answer 1

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

Answer 2

あなたが使用したい場合は、その内容が比較的アイテム

.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

に配置されますので、あなたのアイテムが利用可能なスペースと一緒に成長を確認することができますマージンを調整するには、space-evenlyを使用するか、クロスブラウザで擬似要素を使用してトリックし、既存のspace-between

スタックスニペット - + 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>

スタックスニペット - 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>