問題
Flexboxで要素を上下中央寄せにするには？
解決策
親要素に「justify-content: center;」を設定する。
固定と可変のレイアウト
Flexboxで固定と可変のレイアウトにする方法をご紹介します。
DEMOはこちら
アイテム
アイテム
アイテム
アイテム
親要素に「justify-content: center;」を設定する
親要素に「justify-content: center;」を設定することで、子要素を上下中央寄せにすることができます。
HTML
<div class="flex-jcenter">
<p class="item">アイテム<br>アイテム</p>
<p class="item">アイテム</p>
<p class="item">アイテム</p>
</div>CSS
.flex-jcenter{
display: flex;
justify-content: center;
}
.flex-jcenter .item{
margin-right: 10px;
padding: 10px;
text-align: center;
background-color: #FCECE8;
}
.flex-jcenter .item:last-child{
margin-right: 0;
}
コメント