display、全部flexでいい説

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回は、僕がコーディングしていて最近思うことを書き残しておきます。

タイトルの通りで、HTML要素は基本的にdisplay: blockないしはinlineが初期値になっていますがもう全部flexにしちゃった方が色々楽なんじゃないかという仮説です。

そもそもflexboxは、縦方向のレイアウトもできる

flexboxは要素の横並べに使われるというイメージが強いですよね。

しかし、厳密には「1次元のレイアウト」を行うためのものです。縦か横かは関係ありません。

縦か横かは、flex-directionというプロパティで決めます。flex-direction: row;(初期値)なら横方向、flex-direction: column;なら縦方向のレイアウトになります。

次の画像のようなレイアウトももちろん普通に要素を置けば実現できますが、flexでも可能ということです。

コードの例

flexは中央寄せなどの配置が簡単

中央寄せ

まず中央寄せといえば、これまで様々な方法が議論されてきました。

  • margin: auto;
  • position: absolute; と translateを使った方法
  • position: absoluete; とmargin: auto; を組み合わせた方法
  • text-align: center;
  • etc…

僕自身もこれらに関する記事はいくつか書いています。

margin: auto;の正体を暴く

2019年9月9日

margin: auto;とposition: absoluteを組み合わせて特殊な中央揃えをする

2021年11月6日

しかし、これらの方法は要素がブロックなのかインラインなのかで使い分ける必要があったり、position: absolute;が絡んでくると要素が意図しない位置に飛んでいってしまうことがあるなど煩雑になりがちです。

display: flex; であればそういった煩わしさがありません。

親要素に、

と指定すれば何があろうと子要素は中央寄せになります。

具体例はこんな感じです。

この例では.Container-Itemはブロックレベル要素ですが、テキストなどのインラインレベル要素でも構いません。

position: absolute;もありませんから、子要素が親要素をはみ出すこともありません。

9方向への配置

さらに justify-contentとalign-itemsの値の組み合わせで中央だけでなく9方向の配置が可能です。

flex-startはその方向における先頭、flex-endはその方向における末尾、centerは中央に配置されますから、それぞれの組み合わせで3 × 3 = 9方向の配置になります。

縦方向レイアウトとの組み合わせ

また、縦方向のレイアウトと組み合わせるとこんな中央寄せも可能です。

親要素にこのような指定をすれば、子要素それぞれに何も指定しなくても全て中央揃えになります。

flexは余白の扱いも簡単

ここまでの例でもしれっと使っていましたが、gapプロパティを使うことで余白の扱いも簡単になります。

例えばこんなレイアウトで、「1番目の要素だけmarginがいらない」という時ってありますよね。

このようなケースでは、例えばfirst-childなどの擬似セレクタを使って打ち消したり、あるいはフクロウセレクタ(https://eclair.blog/usage-owlselector-in-css/)という特殊な書き方を使って回避していました。

しかし、gap(column-gap/row-gap)プロパティというそもそも要素間の余白を定義するためのものがあるわけです。それを使えばよりシンプルに書けます。

これならどれにmarginをつけてどれを打ち消すか、など考える必要がありません。

余白についての考え方をもっと詳しく知りたい方はこちらをご覧ください。

余白はいつ生まれるのか

2022年6月4日

実践でどのように使うかのデモ

デモとして、CodeStepさんのこちらの1番のデザインカンプ(https://code-step.com/xd-public/)をお借りしました。

デモページはこちらです。PC版のみですが確認してみてください。(https://itokoba.com/flex-sample/

またリセットCSSとしてはdestyle.cssを用いています。(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css

コードは以下です。

index.html
style.css

僕自身もまだ試行錯誤中ではありますが、今回は試しに全要素の初期値として、

を指定してみました。結果としてmarginを一切使わずにコーディングを行うことになりました。

もちろん全ての要素をdisplay: flex;にすることを推奨する訳ではないですし、marginを使うことを否定する訳でもないです。

また、3つ以上並んだ各要素間の余白が同じでなければいけないのでそもそも使えないというケースも多くあるでしょう。

それでもflexにすればスムーズな部分もやはり多いなという印象です。

まとめ

というわけで、flexboxについて色々考えてみました。全部flexといってもgridの方が適している場合もありますし、やはり全部display: flex;だと困ることもいくつかありそうです。

それでも、これまでCSSのテクニックとされていたことの多くは実はもう必要無くもっと簡潔に書けるケースも多々あるということも分かりました。

みなさんもぜひ新しいプロパティに出会うたびに、これまで常識だとされていたこと疑ってみてください。

もっといい方法が見つかるかもしれません。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください