フレックスレイアウトで最後の要素のmargin-rightが効かない場合の対処法

2年 ago
海斗, 葵
1 minute

フレックスボックスレイアウトにおいて最終要素の margin-right が効かない場合は justify-content プロパティの影響が考えられる。justify-content: space-between あるいは justify-content: space-around を設定している場合は、最終要素の margin-right は無視される。

この問題に対処する 1 つの方法は、コンテナに追加のプレースホルダー要素を追加して最後の要素にし、それを透明または非表示にすることです。たとえば、次のようになります。

HTML:

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="placeholder"></div>
</div>

ネイティブの日本語で言い換えると

.container {
display: flex;
justify-content: space-between;
}
.item {
margin-right: 10px;
}
.placeholder {
visibility: hidden;
}

上記の例では、余白をブレークしない要素を最後に配置し、placeholderクラスを追加することで、margin-rightの効かない現象を回避しています。

もう1つの方法として、margin-right ではなく、margin-leftを使うという方法があります。最後の要素のmargin-rightをmargin-leftに変更すれば同様の効果が得られます。

ネイティブに日本語で言い換えると、

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item last-item">Item 3</div>
</div>

ネイティブの日本語で言い換えてください。1 つのオプションだけで結構です: CSS:

.container {
display: flex;
justify-content: space-between;
}
.item {
margin-right: 10px;
}
.last-item {
margin-left: 10px;
margin-right: 0;
}

最後の要素にのみ margin-right を 0 に設定し、margin-left を同じ値に設定すれば margin-right が効かない問題を回避できます。

bannerAds