問題 × 解決策

Flexboxで左端と右端の余白をなしにする方法

問題

Flexboxで左端と右端の余白をなしにするには?

解決策

「justify-content: space-between;」を親要素に設定する。

 

左端と右端の余白をなしにする

Flexboxで左端と右端の余白をなしにする方法をご紹介します。

DEMOはこちら

アイテム

アイテム

アイテム

「justify-content」の設定

justify-content: space-between;」を親要素に設定することで、左端と右端の余白をなしにして均等に配置することができます。

HTML

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

CSS

.flex-pack{
    display: flex;
	justify-content: space-between;
}
.flex-pack .item{
	padding: 10px;
	text-align: center;
	background-color: #FCECE8;
}

コメント

コメントを残す

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

ten − seven =

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

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