問題 × 解決策

Flexboxで要素を上下中央寄せにする方法

問題

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;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

1 × three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧