【マークアップ】なんだお前？横並べの事故防止方法

こんばんは。ブログ改造中のニラです。

一年前の自分のCSSの見にくさによって、通常の三倍くらい時間食らってます。

今日は、Flexで横並べをした時に起こる事故とその直し方について説明します。

横並べの事故とは

理想

横３つ、縦２つという構成でボックスを並べたいです。そして、５つの場合、下の画像のように詰めてくれるようにしたいです。だが・・・。

現実

そもそもうまく改行されない場合や・・

五つの場合、変なふうに並べられてしまう。っていう事故が発生します。

上の事故はよっぽど見かけませんが、下の事故をたまに見かけます。これを事故と捉えるかは、人それぞれです。

ちょっと工夫をすれば、防ぐことができます。解説していきましょう。

印とかつけたいので、コードペンは無しです。

01 flex-wrap: wrapにしよう

htmlは、こんな感じです。よくあるやつだと思います。

CSSです。赤く囲ってあるやつを変更していきます。

まず、.works__allに、flex-wrap: wrapをつけましょう。flex-wrapのデフォルトがnowrapなので、そのままでは死んでもでも改行されないです。

BEFORE

AFTER

これで改行されましたね。

ボックスの幅を決めよう。

改行はされましたが、これはキモいですね。

ここに、widthを設定しましょう。

ウィンドウの幅に応じて、ボックスの並べ方を変化させたい人は、px単位。この場合、３つのボックスのwidthの和が親要素のwidthを超えないようにしましょう。

ウィンドウの幅に応じても、ボックスの並べ方を変化させたくない人は、％単位にしましょう。この場合、３つのボックスの和が、100%を超えないようにしましょう。

僕は、％で設定していきます。30%くらいかなぁ

綺麗に並びました。

ここからが本番

ボックスの数が３の倍数ならいいけど、そうじゃないとき、変な並び方になります。

左に詰めたいっていう人もいるんじゃないんでしょうか。

justify-contentをflex-startにする

左に詰めたいなら、.works__allのjustify-contentをflex-startにすればいいですよね。

ギッチギチになりましたね。こうゆうデザインもありますが、今回はそうはいきません。

じゃあ、各ボックスに余白をつけましょう。margin-rightです。

この場合、三つのボックスのwidthと余白の和が、ぎりぎり100%を超えないようにしましょう。

僕はさっき30%にしたので、余白は3％ですね。これで和は99%です。

これで解決！って言いたいところですが、なんか左に寄ってます。中央だ！って誤魔化したいけど多分バレる。

左に余白がなく、右側だけにあるのが原因みたいですね。

じゃあ、左右両方に余白をつけたら？右側のみに3％ではなく、左右に1.5％ずつつけましょう。

ほぼ真ん中になりました！しかし、両サイドのボックスが、水色の四角に接することができなくなります。

一番右だけ、余白をなくす。

上のやつでも全然いいのですが、それでも気になってしまう人もいるでしょう。

理想

こうするためには、一番右だけ、余白をなくす必要があります。

今回の場合、一番右側は、３の倍数なので.works__box: nth-child(3n)の右の余白を０にしましょう。

こんな感じです。

ただ、ピンクの部分に注目してください。

３の倍数目の右余白が無くなった分、他の右余白を増やさなくては、若干左に寄ってしまいます。

なので

（ボックスの幅＋ボックスの右余白）×３ー（ボックスの右余白 × １）≒ １００

って考えて設定してください。

これで完璧です。お疲れ様でした

❤︎

2022/09/15

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

fill out コメントをキャンセル

Artist

nira-012.mahora94

よろしくお願いします