Flexboxの使い方 - display:flexと子要素プロパティを解説

display:flexを指定してFlexboxを使おう！

はじめに

floatから脱却してFlexboxを使ってみたいけど、どうやって使うのかがわからない...

HTML・CSSを使ったお洒落なWEBサイトを作って色々な人に見てもらいたい！この記事をみているということは一度はそのように思ったことがあると思います。しかしながら実際に制作を行ってみるととても大変で、挫折をしてしまったという人も少なくはないと思います。特に要素を横並びにする"float"に関連する仕様は非常に初心者には理解しにくいもので、思うようにいかずに投げ出した人もいるのではないしょうか。

「イラストをただ並べたいだけなのに細かくCSSを書くのは面倒だし時間がかかる」、「positionが何のためにあるのかわからないので、floatやabsolute、relativeなど全くイメージできない」など...途中で投げ出したくなってもおかしくないくらい、わかりにくいものでもあるのです。

"Flexbox"をダウンロードすれば"float"なんて考えないで画像を横に並べられるの？

"Flexbox"を使えば、floatを使わずとも画像やイラストなどの配置を実現できます。ただ、Flexboxについて正しい理解ができていない人もそれなりにいると思われるのが現状です。

本記事では、Flexboxというものはそもそもどんなものなのかや、それらがどういう特徴を持ち、どのように活かすものなのかを解説します。

この記事は、Flexboxの存在を知ってはいるが、実際に使った事はない、名前だけ聞いたことがあるがどんなものなのかはわからない、という方が対象です。さらに、ある程度HTMLやCSSはわかるものの、何も見ないで作ろうとすると何をして良いのかがわからない人や、floatを使ったWEBサイトの構築に苦労している方にも是非ともオススメです。今までfloatを使ってWEBサイトを作ってきたが、Flexboxを新たに学習したいという方にもオススメです。

逆に、HTMLやCSSという言葉にすらピンとこないという完全なる初学者であるという段階の方はFlexboxの話をしても理解が大変だと思いますので。まずProgateやってください。

Flexbox とは？ ~ ダウンロードして使うものではない ~

CSS3で追加された、機能の1つ

Flexboxは、CSS3で追加された新しいCSSの機能の一つです。CSS3での機能であるため、古いブラウザでは機能しないことがあります(基本的には気にしなくて大丈夫です)

ご存知の通りWEB制作を行うにあたっては"float"がよく使われてきました。要素にdisplay:floatを指定することで子要素を親要素の管理下からいったん外れたような状態にさせ、ページ内に必要なコンポーネントを横に並べたり、縦横中央に寄せる、枠の端に寄せるなどの基本的な配置をするための要素操作を行いました。しかしながらfloatを使ったマークアップを行う場合は、clearfixを用いたり、overflow:hiddenを使って要素の回り込みを防止しなければならなかったり、空のタグとcleatを使ってfloatを解除する手間があったりなど様々な方法こそありますが、どうあっても面倒な工程を踏まなければならず敷居を高くしています。

新しく登場したFlexboxでは、そんな悩みを一瞬で解決してくれます。

Flexboxは、floatを使って表現できていたものがFlexboxでも実現できるという非常に便利な新機能です。

コンポーネントを横並びにする、中央に寄せるといった基本的な操作から、「等間隔に配置する」、「端の要素だけ親要素の端に配置した上で等間隔に配置する」、「基準のラインに沿って要素の高さを揃える」といったことが可能で、floatで必要だった細かな作業の手間がなくなり、非常に扱いやすいものです。

しかも、CSS3から追加された新機能というところから察せるとうに、Flexboxはフレームワークでもパッケージでもありません。CSS3を使える環境であれば標準搭載されているものなのです。

floatと同じようにdisplayに指定するだけで使えてしまうもの。環境構築の手間もかからない、まさに使い得と言える機能と言えますね。

Flexboxを使うには？

早速Flexboxを使ってみましょう。

親要素に「display: flex」を指定する。

Flexboxは、「Flexコンテナ」と呼ばれる親要素の中に、1つ以上の「Flexアイテム」と呼ばれる子要素(並べたいパーツやイメージなど)を格納して利用する構成です。並べたいパーツを囲い込むようにdivタグなどで囲い込みましょう。

そして囲い込ん親要素に対して、CSSで「display: flex」を指定するだけで準備完了です。

  // HTML
  ＜div class="flex--container"＞
    ＜div class="flex--item"＞子要素１＜/div＞
    ＜div class="flex--item"＞子要素２＜/div＞
    ＜div class="flex--item"＞子要素３＜/div＞
  ＜/div＞


  // CSS

  .flex--container {
    display: flex;
  }

プロパティの指定

Flexboxではdisplay: flex;だけを指定するだけでも子要素は横並びになり、縦に順番通りに並んでくれますが、これをさらに自分好みの配置になるようにカスタマイズできます。親要素・及び子要素に対してこの様々なプロパティを付与して、独特の配置を行いましょう。

基本的には親要素にプロパティを指定する方法がポピュラーです。モダンなWEBサイトであれば基本的にはFlexboxが採用されたデザインになっています。

また、本掲載サイトにはFlexboxそのものを解説した「Flexbox - 面倒なfloatから脱却しよう -」という記事がありますので、是非参考にしてみてください。

よく使う親要素に指定するプロパティを掲載しておきますので、参照してみてください。

子要素の配置順序を指定する ~ flex-direction ~

flex-directionを指定することで、子要素を左から右に並べたり、右から左へと並べたり、上下の並ぶ順番を逆転させたりすることが可能です。

子要素を1行にするか折り返すか ~ flex-wrap ~

flex-wrapを指定することで、子要素を並べた時に1行でずらりと並べるのか、複数行になるように折り返して並べるのかを決定できます。

複数行になるように指定した場合、親要素の横幅をオーバーした分は次の行へ折り返されます。

flex-flow

flex-directionとflex-wrapはまとめて書くことが可能です。慣れてきたら使ってみましょう。

flex:flow: column wrapといったように、flex-firection flex-wrapの指定方法をまとめて書きます。

横に並べる際の間隔を決定する ~ justify-content ~

justify-contentを指定することで、子要素を並べる際に横にどのような間隔を開けて並べるのか、あるいは中央に寄せるのかといった配置の方法を指定することができます。

縦に並べる際の間隔を決定する ~ align-items ~

align-itemsを指定することで、子要素を縦のどの位置に配置し並べるのかを指定することができます。中央寄せをしたり、上や下に揃えて並べたりして使います。初めのうちはjustify-contentを縦にしたものだと考えると良いかもしれません。

子要素に指定するプロパティ

ある子要素だけを操作したいといった特別な場合に、子要素に対して指定できるプロパティを使います。

頻繁に使われるものではありませんが、ランディングページにアクセントをつけたり、整然としていて無機質感が嫌だと感じた場合にはこちらの子要素に指定するプロパティを使ってみましょう。

特定の子要素の順序を決定する ~ order ~

何もしていない場合、HTMLに記述した順番で子要素は並べられます。(上記の例で言えば、子要素１、子要素２、子要素３の順番に並べられます。)

orderを使うと、この順番通りに並べられている子要素に優先順位をつけることが可能です。初期値はどの子要素も「0」が割り振られていて、このorderで優先順位が高くなればなるほど先に配置されるようになります。

  // 子要素への指定
  // HTML
  ＜div class="flex--container"＞
  ＜div class="flex--item1"＞子要素１＜/div＞
  ＜div class="flex--item2"＞子要素２＜/div＞
  ＜div class="flex--item3"＞子要素３＜/div＞
  ＜/div＞
  

  // CSS
  .flex--container {
    display: flex;
  }
  .flex--item1 { order: 3;}
  .flex--item2 { order: -1;}
  .flex--item3 { order: 2;}

  //配置順
  [子要素2][子要素3][子要素1]

優先度の数値が小さければ小さいほど、先に配置されるようになります。マイナスを使うことも可能です。"z-index"とやりたい事は似ていますが、どの数値を使うかや、やりたい事は異なるので混同しないようにしましょう。

flex ~ 伸び幅、縮小幅、ベース幅 ~

子要素に"flex"を指定する事で、それぞれ、親要素に空きスペースがある場合の「子要素のそれぞれの伸び幅」「子要素のそれぞれの縮小幅」「子要素のベースになる幅の指定」ができます。

この「親要素に空きスペースがある場合」というのは、まず存在する子要素を一度全て配置した上で、なおあまりのスペースがある場合に、その余ったスペースを子要素それぞれがどのくらいの割合で再分配されるかということを指しています。

次の「縮小幅」の場合はその逆て、全配置した場合にスペースが足りなくてはみ出てしまう場合、そのはみ出た分、子要素がどれだけの割合で縮小することで枠内に治めるかを決めることが可能です。

ここは実際に使ってみなければイメージしにくいものですので、初心者の方は必要になった場面で試してみる、というもので十分でしょう。

いかがでしたか？

Flexboxを使うには、display:flex;を指定するだけで良いこと、何かダウンロードしたりする必要などないということが、みなさんにもこれでよくわかったのではないでしょうか？しかしながら、Flexboxは知識だけではなかなかイメージ仕切れません。実際に手を動かして学習することで慣れていくものなので、失敗を恐れず試してみましょう。