CSS Flexで一列に中央揃えと右揃えを行う方法

Question

これは多くのバリエーションを試しましたが、うまく動作しませんでした。ここで最後の試みは、次のとおりです。

HTMLで

.parent { 
    display: flex; 
    //justify-content: center; 
    width: 600px; 
    background-color: yellow 
} 
.c { 
    //flex: 1 1 0; 
    //text-align: end; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: cyan; 
} 
.e { 
    //flex: 1 1 0; 
    // text-align: end; 
    background-color: grey; 
} 
.bs { 
    background-color: green; 
    color: white; 
    width: 70px; 
} 

：

<div class="parent"> 
    <div class="c"> 
    <button class="bs">OK</button> 
    <button class="bs">Cancel</button> 
    </div> 
    <div class="e"> 
    <button class="bs">Help</button> 
    </div> 
</div> 

私は「可視性：隠された」置くことによって、この問題を解決する方法を知っている左側のボタンをし、と正当化コンテンツを使用します私はCSSを使用してそれを行う方法を学びたい/知りたい。

アドバイスをいただきありがとうございます。

Answer 1

それを行うための複数の方法があります。 CSSのみ（余分なマークアップ/隠し要素）擬似を使用して、それを作成し、それらにflex-basis: 100%を与えることによって、全体の幅のそれぞれ1/3を取る各ボタンのラッパーと、デフォルトflex-shrink: 1はそれらを縮小するとここで

等しく。

.parent { 
 
    display: flex; 
 
    width: 600px; 
 
    background-color: yellow 
 
} 
 
.parent::before, .c, .e { 
 
    content: ''; 
 
    flex-basis: 100%; 
 
} 
 
.c { 
 
    background-color: cyan; 
 
    text-align: center; 
 
} 
 
.e { 
 
    background-color: grey; 
 
    text-align: right; 
 
} 
 
.bs { 
 
    background-color: green; 
 
    color: white; 
 
    width: 70px; 
 
}

<div class="parent"> 
 
    <div class="c"> 
 
    <button class="bs">OK</button> 
 
    <button class="bs">Cancel</button> 
 
    </div> 
 
    <div class="e"> 
 
    <button class="bs">Help</button> 
 
    </div> 
 
</div>

---

上記の溶液を、私はここに与えた答えに基づいています。

• How to align groups of buttons on single row with Flex only?

そしてここでは、3つのより多くの方法で、最初のサンプルもこれで解決します余分なマークアップ使用して、絶対位置アウト

• Center and right align flexbox elements

Answer 2

完全に揃えたい場合は、空の子divを追加して、3つの子divを3つに分割することができます。

これは動作します：CodePen Demo

.parent { 
 
    display: flex; 
 
    background-color: yellow; 
 
} 
 

 
.parent div { 
 
    display: flex; 
 
    flex-basis: calc(100%/3); 
 
} 
 

 
.c { 
 
    justify-content: center; 
 
    background-color: cyan; 
 
} 
 

 
.e { 
 
    justify-content: flex-end; 
 
    background-color: grey; 
 
} 
 

 
.bs { 
 
    background-color: green; 
 
    color: white; 
 
}

<div class="parent"> 
 
    <div class="a"></div> 
 
    <div class="c"> 
 
    <button class="bs">OK</button> 
 
    <button class="bs">Cancel</button> 
 
    </div> 
 
    <div class="e"> 
 
    <button class="bs">Help</button> 
 
    </div> 
 
</div>

注：をあなたはボタンが同じサイズになりたい場合は、コードの中であなたの.bsクラスにflex-basis: calc(100%/3);を追加することができます上記。

中央のボタンにも横の余白を追加したい場合があります。

---

また、空の子divを作成することができますし、親コンテナにjustify-content: space-betweenを呼ぶが、それは完全に整列されません。CodePen Demoを、以下のスニペットを使用しています。

---

.parent { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background-color: yellow; 
 
} 
 

 
.bs { 
 
    background-color: green; 
 
    color: white; 
 
}

<div class="parent"> 
 
    <div></div> 
 
    <div class="c"> 
 
    <button class="bs">OK</button> 
 
    <button class="bs">Cancel</button> 
 
    </div> 
 
    <div class="e"> 
 
    <button class="bs">Help</button> 
 
    </div> 
 
</div>

Answer 3

.parent00_100perc, .parent01_100perc { 
 
    display: flex; 
 
    width: 480px; 
 
    background-color: yellow; 
 
} 
 

 
.parent00_100perc::before { 
 
    content: ''; 
 
    flex: 0 0 100%; 
 
} 
 
.parent01_100perc::before { 
 
    content: ''; 
 
    flex: 0 1 100%; 
 
} 
 

 

 
.spanflex00 { flex: 0 0 100%;} 
 
.spanflex01 { flex: 0 1 100%;} 
 

 
.bs { 
 
    background-color: green; 
 
    color: white; 
 
    width: 70px; 
 
} 
 
.itemcenter { 
 
    background-color: cyan; 
 
    text-align: center; 
 
} 
 
.itemright { 
 
    background-color: grey; 
 
    text-align: right; 
 
}

<p>Solution is by LGSon. I have just added a bit to verify I understand it by showing the initialisation and shrinkage phases of the solution, i.e.</p> 
 

 
<p>Phase 1. initialisation that produces three parts of equal size on a single line. From left to right an empty part, a mid part with centred OK and Cancel buttons and a last part with a right-aligned Help button. Size of line 3x480px and is shown.</p> 
 

 
<p>Phase 2. init & shrinkage that removes equal amount of space on the left and between the mid and right buttons. This leaves the OK and Cancel buttons still centred and shows a 480px wide result> 
 

 

 
<p>Phase 1: after initialsation 0 0 100%</p> 
 
<div class="parent00_100perc"> 
 
    <span class="spanflex00 itemcenter"> 
 
    <button class="bs">OKAY</button> 
 
    <button class="bs">Kancel</button> 
 
    </span> 
 
    <span class="spanflex00 itemright"> 
 
    <button class="bs">SOS</button> 
 
    </span> 
 
</div> 
 

 
<p>Phase 2: init and shrinking 0 1 100%</p> 
 
<div class="parent01_100perc"> 
 
    <span class="spanflex01 itemcenter"> 
 
    <button class="bs">OK</button> 
 
    <button class="bs">Cancel</button> 
 
    </span> 
 
    <span class="spanflex01 itemright"> 
 
    <button class="bs">Help</button> 
 
    </span> 
 
</div> 
 

 
<p>This method/solution can create a centred mid-part with one or two edge parts without adding empty divs or hidden elements to one of the edges.