HTMLは変えたくない！でも、レスポンシブで表示順序を変えたい。そんなあなたに贈るFlexbox tips

お久しぶりです。レタスです。
前回書いたブログがなんと5月...だったことにびっくりです。
すでに8月、夏真っ盛り。もはや残暑。皆さんは今年の猛暑は大丈夫でしたか？
私個人の今年の夏はゆるくハイキングしたり、富士登山したり、川でSAPしたりと、野外で割とアクティブに遊ぶことが多かったです。
東京のオフィスより自然に近い方が好きなので、デザインの仕事と何かうまいこと繋げられないかな〜なんて思っているところです。

さて、今回はLP制作でコーディングしながら得たCSSネタについて書きたいと思います。
使う時はごくごく限られるかもしれないですが、私自身もflexboxで日頃利用しない組み方だったので、同じような場合に必要とする人がきっといるはず...!と見込んでメモしておきます。

ちなみに

そういうコーディングもデザイナーがやるの？という声が聞こえそうなので補足しますと。
ゴーリストデザイン部ではSketchやillustratorでのデザイン画面作成に加えて、フロントのコーディングも担当する場合が多いです。
WebページだったらHTML,CSS,JavaScriptを書き書き、
Webアプリなど、プロダクトであればHTML,CSSはこちらが担当し、何かしらの操作やアクションが関わる部分に関してはバックエンドのエンジニアさんにお願いし、それぞれカバーし合って実装してます。
専任のフロントエンドエンジニアが不在ゆえの体制ではあるのですが、作業自体や頭を使う部分が全然違うので、一つのプロジェクト内でも工程が変わるとがらりと気分が変わって面白いです。
得意不得意はありますが、未経験でも関係なくOJTで習得しながらやっています。
私はHTML・CSSの実装は割と苦労しませんでしたが、ロジックを書くのが不慣れなので、JavaScriptに関しては勉強中です。
デザイン部新卒のマスダさんは、デザインワークにも精を出しつつ、これからAngularの習得も目論んでいるようです。どっちもできるようになったら強いだろうな〜。
担当や仕事が分業しきってない規模の会社だからこそなのかもしれませんね。デザインエンジニアリングを深めるという点では良いのかも。

いざFlexboxの小ネタを共有せん

弊社サービスHRogチャートのLPを例にしていきます。

モバイル表示時、デスクトップとは異なる順番で要素を並べたい

こちらの図はサービスの特徴について説明する部分なのですが、目線が単調にならないように図を左右交互にレイアウトしています。
PCでの表示ですと、こうなります。

モバイルではそれを縦並びに表示させればよかろう...と思っていたところ、2番目の段落では図が先にきてしまいました...ヌーン。

それはそうなんですけど、順番が変わることについて考えていませんでした。モバイル表示の際には説明文が先に来るように入れ替えたい。

そこで登場するのがflexのorderプロパティです。こちらはflexがかかってるアイテムのレイアウトを、数字で順序づけた順に並べることができます。数字が小さい方が先にきます。
ついでに、Flex-directionプロパティを変更すると、並ぶ方向も自在に変えることができます。

参考：

Flex アイテムの順序を設定する - CSS: カスケーディングスタイルシート | MDN

ここでは特徴のテキストを記載している部分のクラス名を.feature、画像部分のクラス名を.feature__imageとして、
その二つを包むdivのクラス名を.feature__wrapperとしました。

.feature__wrapper{
  display:flex;
  flex-direction: column;
}

.feature{
  @media (max-width: 479px){
    order:1;
  }
}

.feature__image {
  @media (max-width: 479px){
    order: 2;
  }
}

すると、こう！

思い通りに並べることができました。

要素を縦並びに、かつ折り返すように並べたい

次はこちらです。

この中身をアイウエオ順で、縦並びに、かつリストアップされるアイテムが追加されても減っても影響のないように並べたい。

例えば、媒体名を表示している白い背景部分を.medias__detailとして、そこにflex-directionとflex-wrapプロパティを指定してあげます。

.medias__detail{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
    max-height: 280px;
}

flex-directionは子要素の並ぶ方向や始点を決めるプロパティで、
・row（横並び、HTMLの記載順に左から右へ）
・column（縦並び、HTMLの記載順に上から下へ）
・row-reverse（横並び、HTMLの記載順に右から左へ）
・column-reverse（縦並び、HTMLの記載順に下から上へ）
の４つの値から1つを設定できます。
※言語によっては左→右へ読むのがデフォルトではなく、右から左へ読む場合もありますので、アラビア語などでは方向が逆になります。

flex-wrapはflexのアイテムを単一ラインに押し込むか、あるいは複数ラインに折り返してもよいかを指定します。

flex-wrap - CSS: カスケーディングスタイルシート | MDN

今回はflex-direction:column;で縦並びにし、

flex-wrap: wrap;で.medias__detailのmax-heightを越えると勝手に次の列へ折り返すように指定しました。

これでどの部分に媒体名が増えたとしても、元からあった要素が後ろに押し出されていくだけなので修正や編集が楽ですね。

以上、Flexboxのtipsでした！

コーディングは調べるたびに小さな知識が増えるので面白いですね。

単語や調べたいことの適切な表現を知らないといけないのが難しいですが...日々日々ぐぐり力も増してってます！

ではまた！