Flexboxでjustify-content: space-betweenの最後の要素を左寄せにする方法

デザイン

cssの display: flex; で、justify-content: space-between を指定したときに、子要素の数によっては、最後と最後の1個前の要素の間にスペースが出来ることがあると思います。
下のような状態になったときです。

上記のような場合、真ん中があいてしまって気持ち悪いですよね?
要素が偶数だと大丈夫なんですが、奇数になると、よくこの状態に出くわしてしまいます。
そこでこれを下の図のようにするにはどうすればよいかを忘却録として記事に残しておきたいと思います。

結論から言うと、疑似要素を使って見えない要素を配置する

要は見えない要素を追加して偶数個にしてしまえばいいということです。
例えばコードは以下のような感じにすればいい感じになります。

html例

<ul class="flexBox">
 <li class="box">並べる子要素</li>
 <li class="box">並べる子要素</li>
 <li class="box">並べる子要素</li>
 <li class="box">並べる子要素</li>
 <li class="box">並べる子要素</li>
</ul>

スタイルシート例

.flexBox {
-js-display: flex;
display: flex;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
flex-wrap: wrap;
}
 .flexBox .box {width: 33%;}
.flexBox::after {
display: block;
content:"";
width: 33%;
}

上記で見事に最後の行びこ要素が左詰めになります。
注意点としては、
・疑似要素は、親要素である「flexBox」に指定する
・疑似要素の幅は、子要素と同じ幅にする

そうすることで、均等に左寄せですべての子要素が並びます。

まとめ

もし子要素が増えても問題ありません。
疑似要素には高さを指定してないので下にはなにも表示されないし変なスペースなども生まれません。
flex指定で子要素を左寄せにしたい状況に出くわした際には、使ってみましょう!

sanpo-zukan

sanpo-zukan

ストアカで『【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室( https://www.street-academy.com/myclass/78668 )』運営中!

関連記事

オススメ2

コメント

この記事へのコメントはありません。

CAPTCHA


sanpo-zukan

sanpo-zukan

当サイト(さんぽずかん)を運営しています「しゃむ」です。 役立つ情報からしょうもないネタまで、少しでも読んだ人の役に立てばいいなと思って、いろいろな記事を掲載していきます!

最近の記事

  1. AIライター対決!ChatGPTとGoogleBardの違いを徹底解説

  2. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  3. WordPressの再利用可能ブロック管理ページにアクセスしやすくする方法

  4. PR

    【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室

新着 オススメ 特集記事
  1. AIライター対決!ChatGPTとGoogleBardの違いを徹底解説

  2. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  3. WordPressの再利用可能ブロック管理ページにアクセスしやすくする方法

  1. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  2. Flexboxでjustify-content: space-betweenの最後の要素を左寄せにする方法

  3. しまった!アップグレードしたらサイトの表示が崩れた!!WordPressをダウングレードするカンタンな方法とは?

  1. AIライター対決!ChatGPTとGoogleBardの違いを徹底解説

  2. まじ助かった!ありがたい!コロナ陽性で自宅療養していて助かった大阪府の支援

  3. GoogleAdsenseで口座確認のデポジットがなかなか入金されなかったとき確認すべき点

TOP