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 )』運営中!

関連記事

特集記事

コメント

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

CAPTCHA


sanpo-zukan

sanpo-zukan

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

最近の記事

  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

  4. PR

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

新着 オススメ 特集記事
  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

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

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

  3. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

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

  2. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  3. ネコ好きLINEユーザー必見!懲りずに第二弾はスタンプ8個でお手軽LINEスタンプ!「ゆるかわミケにゃん」販売開始!

TOP