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