問題 × 解決策

Flexboxで要素同士に余白をmarginで設定する方法

問題

Flexboxで要素同士に余白を設定するには?

解決策

子要素にmarginを設定する。

 

要素同士に余白をを設定する

Flexboxで要素同士に余白をmarginで設定する方法をご紹介します。

DEMOはこちら

アイテム

アイテム

アイテム

各子要素にmarginを設定する。

flex内でも、各子要素にmarginを設定することで、余白を作ることができます。

HTML

<div class="flex-margin">
	<p class="item">アイテム</p>
	<p class="item">アイテム</p>
	<p class="item">アイテム</p>
</div>

CSS

.flex-margin{
    display: flex;
}
.flex-margin .item{
	margin-right: 10px;
	padding: 10px;
	text-align: center;
	background-color: #FCECE8;
}
.flex-margin .item:last-child{
	margin-right: 0;
}

コメント

コメントを残す

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

11 + 16 =

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

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