問題
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;
}
コメント