行の列幅を "display：table"に設定してください

Question

私は画面の高さの25％を占める行を持っています。それはdisplay:tableと設定されています。その中の列はすべて33.333％幅で、display:table-cellと設定されています。今、3つの列がある場合、それは正常に動作し、等しい幅を持ち、1行につき3つです。しかし、4番目の列を追加すると、4番目の列は33.333％の幅で表示されず、2番目の行にドロップされずに中央に表示されません。まったくできますか？

余分な列も33.333％の幅にして、最初の行の下の行の中央に配置します。

.row-flex { 
 
    display: table; 
 
    width: 100%; 
 
    height: 25%; 
 
    margin 0 auto; 
 
} 
 
.one-third-flex.column { 
 
    width: 33.3333%; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    float: none; 
 
}

<div class="row row-flex buttons-bottom row-one-half text-body"> 
 
    <div class="one-third-flex column" style="background-color:red">&nbsp;</div> 
 
    <div class="one-third-flex column" style="background-color:green">&nbsp;</div> 
 
    <div class="one-third-flex column" style="background-color:yellow">&nbsp;</div> 
 
    <div class="one-third-flex column" style="background-color:pink">&nbsp;</div> 
 
</div>

Answer 1

あなたは、テーブルの挙動に近いようにフレックス使用することができます。いくつかのチューニング

.row-flex {text-align:center; 
 
    width: 100%; 
 
    height: 25%; 
 
    margin 0 auto; 
 
    font-size:0; 
 
} 
 
.one-third-flex.column { 
 
    width: 33.3333%;display:inline-block; 
 
    font-size:1rem; 
 
    /* where it starts to go wrong with the layout you look for */ 
 
    height:50%;/* hmmm */ 
 
    white-space:nowrap; 
 
} 
 

 
/* vertical-centering in inline-block boxes */ 
 
.one-third-flex.column:before { 
 
    content:''; 
 
    height:100%; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    } 
 
/* .one-third-flex.column must have a single child to hold content div, p, or whatever */ 
 
.one-third-flex.column>* { 
 
    display:inline-block; 
 
    max-width:99%; 
 
    white-space:normal; 
 
    vertical-align:middle; 
 
    } 
 
/* end trouble but not flexible & unsolved totaly */ 
 
html, 
 
body { 
 
    height:100%; 
 
    margin:0; 
 
    }

<div class="row row-flex buttons-bottom row-one-half text-body"> 
 
    <div class="one-third-flex column" style="background-color:red"><p>1</p></div> 
 
    <div class="one-third-flex column" style="background-color:green"><p>2</p></div> 
 
    <div class="one-third-flex column" style="background-color:yellow"><p>3</p></div> 
 
    <div class="one-third-flex column" style="background-color:pink"><p>4</p></div> 
 
</div>

（試験の両方の高さの完全な動作を確認するためにフルページモードでスニペット）

と

.row-flex { 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
    justify-content:center; 
 
    width: 100%; 
 
    height: 25%; 
 
    margin 0 auto; 
 
} 
 
.one-third-flex.column { 
 
    width: 33.3333%; 
 
    text-align:center; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
html, 
 
body { 
 
    height:100%; 
 
    margin:0; 
 
    }

<div class="row row-flex buttons-bottom row-one-half text-body"> 
 
    <div class="one-third-flex column" style="background-color:red">&nbsp;1</div> 
 
    <div class="one-third-flex column" style="background-color:green">&nbsp;2</div> 
 
    <div class="one-third-flex column" style="background-color:yellow">&nbsp;3</div> 
 
    <div class="one-third-flex column" style="background-color:pink">&nbsp;4</div> 
 
</div>

またはインラインブロック

Answer 2

使用フロートは：代わりなし 変更されたコードを残しました。

.one-third-flex.column 
{ 
width: 33.3333%; 
display: table-cell; 
text-align: center; 
vertical-align: middle; 
float: left; 
} 

Answer 3

使用この：

.row-flex { 
    display: table; 
    width: 100%; 
    height: 25%; 
    margin 0 auto; 
} 
.one-third-flex.column { 
    width: 33.3333%; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    float: left; 
} 

.one-third-flex.column:last-child { 
margin-left:33.333%; 
} 

Demo