Flexboxを使用してdivを垂直にセンタリング

Question

flexboxを使用してdivを垂直方向にセンタリングしようとしています。私はli's、高さはheight:100pxです。私は次に、このように垂直方向にセンタリングしようとしました：align-items: center、上部が途切れてしまいます。

Flexboxを使用して、上部を切り取らずに垂直にセンタリングするにはどうすればよいですか？

はここJSFiddleだし、ここでのコードスニペットです：

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#flexWrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: aqua; 
 
    height: 100%; 
 
    align-items: center; 
 
    /* This statement makes the problem */ 
 
    overflow: auto; 
 
} 
 
#flexContainer { 
 
    width: 70%; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    align-content: flex-start; 
 
} 
 
li { 
 
    background-color: tomato; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    flex-basis: calc(100%/3); 
 
    height: 100px; 
 
}

<div id="flexWrapper"> 
 
    <ul id="flexContainer"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
    <li class="flex-item">7</li> 
 
    <li class="flex-item">8</li> 
 
    <li class="flex-item">9</li> 
 
    <li class="flex-item">10</li> 
 
    <li class="flex-item">11</li> 
 
    <li class="flex-item">12</li> 
 
    <li class="flex-item">13</li> 
 
    <li class="flex-item">14</li> 
 
    <li class="flex-item">15</li> 
 
    <li class="flex-item">16</li> 
 
    <li class="flex-item">17</li> 
 
    <li class="flex-item">18</li> 
 
    <li class="flex-item">19</li> 
 
    <li class="flex-item">20</li> 
 
    <li class="flex-item">21</li> 
 
    <li class="flex-item">22</li> 
 
    <li class="flex-item">23</li> 
 
    <li class="flex-item">24</li> 
 
    </ul> 
 
</div>

Answer 1

Flex-Fuには何も問題はありません。これは、フレックスボックスの外側にあり、望ましくない結果をもたらします。フィドルを見て、/または下のスニペット：私はCSSをリセット

html { 
    box-sizing: border-box; 
    font: 400 16px/1.5 'Source Code Pro'; 
    height: 100vh; 
    width: 100vw; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0 solid transparent; 
} 

Fiddle

html { 
 
    box-sizing: border-box; 
 
    font: 400 16px/1.5 'Source Code Pro'; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0 solid transparent; 
 
} 
 
#flexWrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: aqua; 
 
    height: 100%; 
 
    align-items: center; 
 
    /* This statement makes the problem */ 
 
    overflow: auto; 
 
} 
 
#flexContainer { 
 
    width: 70%; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    align-content: flex-start; 
 
} 
 
li { 
 
    background-color: tomato; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    flex-basis: calc(100%/3); 
 
    height: 100px; 
 
}

<div id="flexWrapper"> 
 
    <ul id="flexContainer"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
    <li class="flex-item">7</li> 
 
    <li class="flex-item">8</li> 
 
    <li class="flex-item">9</li> 
 
    <li class="flex-item">10</li> 
 
    <li class="flex-item">11</li> 
 
    <li class="flex-item">12</li> 
 
    <li class="flex-item">13</li> 
 
    <li class="flex-item">14</li> 
 
    <li class="flex-item">15</li> 
 
    <li class="flex-item">16</li> 
 
    <li class="flex-item">17</li> 
 
    <li class="flex-item">18</li> 
 
    <li class="flex-item">19</li> 
 
    <li class="flex-item">20</li> 
 
    <li class="flex-item">21</li> 
 
    <li class="flex-item">22</li> 
 
    <li class="flex-item">23</li> 
 
    <li class="flex-item">24</li> 
 
    </ul> 
 
</div>

関連するコード✲はheight: 100vhとwidth: 100vw〜<html>に適用され、レイアウトのすべてのサイズが見えるようになりました。見苦しいカットオフはありません。 vhおよびvwの詳細については、hereがあります。

✲すべてのCSSリセットrulsetsはオプションですが、成功するために必要な唯一のプロパティは、vhとvwです。

Answer 2

は許容この1か？

#flexWrapper { 

justify-content: center; 
background-color: aqua; 
height: 100%; 
width:70%; 
margin:0 auto; 
} 

http://codepen.io/damianocel/pen/gavEzv

あなたの代わりにPXの％値を使用する必要があります、それは応答しています。

本当にレイアウトをどのように見たいか、常に3行8列に依存しますか？