📝

知らなそうで知ってる flex のおすすめの使い方

Yuki-Kanayama

2022/12/15に公開

タイトルからも自身のなさが伺えますが、知らなそうやけど大体の人は知ってるんじゃない？っていう普段それなりに使用 flex の使い方を紹介します。

MDN のサイトを参考に flex を指定している要素を コンテナー、
その子要素を アイテム を呼びます。（正式名称？？）

また、position: absolute; は使わない方針で行きます（）

【途中から寄せる】

style.scss

.header {
  &__nav {
    // 右寄せにする
    margin-left: auto;
  }
}

コンテナにはjustify-content: flex-start; を指定しておき、途中のアイテムに対して margin-left: auto; 等の寄せたい方向の margin を指定することで寄せることが出来ます。

これは、flex-direction: column; で縦並びなっていても可能です！

【順番を変える】

スマホサイズだと 2 列表示(Z 型)、PC だと 1 行表示の場合は、アイテムに対して order を使うことで順番を変更することができます。

style.scss

.link {
  &01 {
    order: 1;
  }

  &02 {
    order: 4;
  }

  &03 {
    order: 2;
  }

  &04 {
    order: 5;
  }

  &05 {
    order: 3;
  }

  &06 {
    order: 6;
  }
}

flex-direction: column と flex-wrap: wrap; を使用して最初から逆 N 型すれば order を使用せずにレイアウトを組むことが出来ますが、高さをうまいこと調整して折り返させないと出来なかったりするので order を使用した方が楽かなと個人的には思います。

ちなみに、order: 1; と order 指定なしのアイテムがある場合は指定なしの方が先に表示されます。

これは利用して、今回の例の場合だと link02, link04, link06 に order: 1; を指定すれば 3 つとも後ろに持っていくことが出来ます。

order には マイナスの値 が指定できるので、逆に link01, link03, link05 に order: -1; を指定すれば先に表示させることが出来ます。

style.scss

.link {
  &01,
  &03,
  &05 {
    order: -1;
  }
}

また、flex-direction を使用して並び順を逆にしたい時も flex-direction は使用せずに order を使用するのがおすすめです。

上記のように PC でレイアウトが逆になる場合、flex-direction: row-reverse; を指定すると並びが逆順になるのと一緒に justify-content や align-items などプロパティの意味の逆になってしまうのでややこしくなってしまいます。

ただ、flex-direction: row-reverse; を使用することが間違いとかではないのでわかりやすい使いやすい方を選択して使用しましょう！

【コンテナーを削除して並び順を変更する】

style.scss

.card {
  &__body {
    // この要素を消す！
    display: contents;
  }
}

display: contents; を使用して、要素自体を無視し要素の親の直接の子にすることが出来ます。これと order を併用することでスマホと PC で全く違うレイアウトにすることが可能です。

またdisplay: contents; は、

適用済みのボタンにはアクセスできません display: contents。Chromium、Firefox、および WebKit の問題を参照してください

can i use
https://caniuse.com/?search=contents

上記の通りの問題があるので過信は禁物です。

【絶対折り返す】

flex-wrap: wrap を使用していて ここで絶対折り返したい！ って時があると思うのですが、その時は擬似要素と order を使用することで折り返しさせることが出来ます。

折り返したいアイテムとそれより前のアイテムに order: -2; を、コンテナーに擬似要素を作成して、order: -1; と width: 100%; を指定すれば擬似要素が横幅いっぱいになって折り返しが始まります！

style.scss

.flex {
  display : flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  &::before {
    content: '';
    order: -1;
    width: 100%;
  }
}

このケースは少なそうに見えますが、僕は結構実務で出てくることが多いです！
案外使うことが多い気がするので是非覚えておきましょう。。。！

【まとめ】

小出し Tips 第一弾ということで案外知らないかもねっていう flex のテクニックを紹介しました。

最近は、IE を無視できるようになったことで gird も本格使用できるようになったり、subgrid という新プロパティも今後導入予定ですがなんだかんだ flex の使用場面が多いと思います。

flex の gap も主要ブラウザで使用可能ですので余白も扱いやすい！

https://caniuse.com/?search=flex gap

flex のおすすめの応用的な使い方があれば是非おしえてください！

spicato Inc.Publication

株式会社スピッカートのエンジニアチームで発信をしています。

【途中から寄せる】

【順番を変える】

【コンテナーを削除して並び順を変更する】

【絶対折り返す】

【まとめ】

Discussion