flexbox
を使用してdiv
を垂直方向にセンタリングしようとしています。私はli's
、高さはheight:100px
です。私は次に、このように垂直方向にセンタリングしようとしました:align-items: center
、上部が途切れてしまいます。Flexboxを使用してdivを垂直にセンタリング
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>
私は私の答えを見て簡単な解決策を見つけたと思う。 – zer00ne
フレックスアイテムをセンタリングするための 'align-items'と' justify-content'に加えて、第2のフレックスメソッド、 'auto'マージンがあります。垂直にセンタリングされるフレキシブルアイテムがフレックスコンテナをオーバーフローする場合、第2の方法がより有用であり得る。詳細については、参考文献の[@ Oriol's answer](http://stackoverflow.com/a/32672661/3597276)を参照してください。 –