Box(フレキシブルボックス)”の略で、フレキシブルと名前がついているように自由度が高く、簡単にHTMLの要素の場所を組み替えることができます。Flexboxは簡単に設定を行うことができるがために十分に理解しないまま使用している人もいるかと思います。この機会にFlexboxの基本から使い方までしっかり理解しておきましょう。Flexboxで、ナビゲーションメニューを作ってみようFlexboxの2つの要素Flexboxでは、Flexコンテナ(Container)とFlexアイテム(Item)という2つの要素から成り立っています。下記のように親要素であるFlexコンテナの中に子要素のFlexアイテムが入っています。要素間の親子関係がなければ、Flexboxを利用することはできません。具体的なFlexコンテナとFlexアイテムは下記のように親子関係のあるものです。containerクラスの持つ要素が親要素でFlexコンテナ、itemsクラスを持つ要素が子要素のFlexアイテムです。Size(大きさ)を制御することでレイアウトを調整していきます。()の内部については、各英単語に対する日本語訳が入っていますが、Wrapについては、包含等の日本語訳では機能が伝わりにくいため、機能の説明である折り返し制御という言葉を使用しています。Size(大きさ)要素をFlexboxとして機能させるためにはFlexboxでは、親子関係を持つ2つの要素が必須となります。その親子関係を持つ要素でFlexboxとして機能させるためには、下記のように親要素のCSSのdisplayプロパティをflexに設定する必要があります。displayをflexに設定するとその要素は、Flexコンテナとなり、その子要素はFlexアイテムとなります。flex;}初めてのFlexbox縦に並んだ要素を横並びに変更するという単純な例を使用してFlexboxがどんなものか確認してみましょう。containerクラスを持つ親要素に3つの子要素が入っているシンプルな構造のHTMLファイルを用意します。</div></body></html>各div要素には、それぞれ異なる背景色をつけています。親要素へのFlexboxの設定は行っていません。#ecf2f9;}ブラウザで確認すると3つのブロック要素が記述した順番に縦に並んで表示されます。}親要素のdisplayプロパティをflexに設定しただけで、3つの子要素は縦並びから横並びへと変更していることが確認できます。親要素のdisplayをflexにFlexboxの最もシンプルな設定方法が確認できたので、Flexboxの個別の機能を確認していきましょう。Direction(方向)FlexboxのDirection(方向)は、横並びが初期設定となっています。flex-directionプロパティを使用することで並び方を変更することができます。flexコンテナである親要素にflex-directionプロパティを追加して値をcolumnに設定します。}flex-directionをcolumnに設定することで縦並びに変更することができます。flex-directionの設定をcolumn初期設定では横並びになるため指定を行っていませんが、横並びを明示的に設定する場合はrowを設定します。column-reverseがあります。ここに図を入れて説明。}flex-directionにcolumn-reverseを設定FlexboxのAlignment(配置)についてFlexboxのAlignment(配置)は、縦方向、横方向で配置を変更することができます。そのため、縦方法の配置と横方法の配置では異なるプロパティを持っています。Alignment横方向の配置には、justify-contentプロパティを使用して設定を行います。初期設定では、左揃え(flex-start)に設定されています。その他にも下記の値を設定することができます。flex-start初期値。Alignment縦方向の配置には、align-itemsプロパティを使用して設定を行います。初期設定では、stretch(親要素の高さ一杯に広がる)に設定されています。横方向の場合は、親要素がブラウザの横一杯に広がっているため幅の設定を行っていませんでしたが、縦方向の配置を行う場合は親要素に高さを持たせる必要があります。containerクラスを持つ親要素の高さ150pxを設定します。flex;}親要素に高さを設定すると子要素の領域も親要素の高さ一杯まで広がります。高さ一杯まで広がるのは、align-itemsプロパティの初期値がstretchのためです。親要素に高さ(height)を設定その他にも下記の値を設定することができます。center;}align-itemsの設定はcenterFlexboxの配置機能で画面中央表示これまでに説明を行ってきたjustify-contentプロパティとalign-itemsプロパティの設定を行えば、ブラウザ画面の中央に簡単に文字を表示することができます。h1要素のFlexBox文字列をFlexboxの機能で画面中央に表示させます。親要素は、body、子要素は、h1になり、flexboxは親要素のbodyに設定します。href="css/style.css"></head><body><h1>FlexBox</h1></body></html>align-itemsを設定するために、body要素の高さは画面いっぱいの100%を設定しています。align-items、justify-contentプロパティどちらもcenterに設定しています。center;}Flexboxの配置機能により、親要素に3つのプロパティを設定するだけで画面中央に文字を表示することができます。Wrap(折り返し制御)子要素の合計の幅が親要素の幅を超えた場合に、折り返しを行って複数行にするのかそのまま1行のまま表示させるのかを設定するのがflex-wrapプロパティです。初期設定では、nowrapに設定されており、子要素の合計の幅が親要素の幅を超えても複数行にはならず、一行で表示される設定になっています。親要素の幅がわかるように親要素にborderを設定します。子要素の幅をすべて250pxに設定します。width:250px;}親要素の幅が十分あるので、子要素は幅250pxを確保できています。親要素の赤色のborderの中で背景がない部分が余分の領域です。親要素の幅が子要素の合計より広い親要素の幅を狭めると同時に子要素の幅も狭くなるため、先ほどと変わらず、子要素であるflexアイテムは1行で表示されます。初期設定では、子要素の合計の幅が親要素の幅よりも大きくなったとしても子要素も同じように幅が狭くなることで1行を維持します。親要素の領域が十分でない場合flex-wrapプロパティを追加し、wrapを設定します。flex-wrap:wrap;}親要素の幅が十分にないため、3番目の子要素が折り返され、2行になっていることを確認することができます。flex-wrapの設定をwrapにさらに親要素の幅を狭めていくと親要素の幅が2つの子要素の幅の合計よりも狭くなるため、すべての子要素が折り返しされ、3行になります。このようにflex-wrapプロパティで折り返しの制御を行います。column-reverseを設定すると通常の順番とは逆の方向で表示させることができます。Order(順番)では子要素であるFlexアイテム全体ではなく個別に順番の入れ変えを行うことができます。順場の変更には、orderプロパティを使用します。初期設定では0が設定されています。3番目の子要素を1番最初に表示させたい場合、orderプロパティに”-1′′を設定します。#ecf2f9;}初期値である0よりも小さい値である-1を設定したために0が設定されている他の要素よりも先に表示され、プラスの値を設定すると大きいほど後に表示されます。orderプロパティで順番変更マイナスの値が大きければ大きいほど前に表示されます。flex-growの3つのプロパティの組み合わせで行われます。Flexboxの設定で一番わかりにくい箇所ですので、1つ1つのプロパティをしっかり理解していきましょう。flex-basisプロパティについてflex-basisでは直接子要素であるFlexアイテムの幅を設定することができます。px等の単位指定でもパーセント%指定でも可能です。初期値はautoで、その要素のコンテンツ幅がFlexアイテムの幅になります。flex-basisの動作確認を行うために子要素それぞれにflex-basisを使用して幅を設定します。#ecf2f9;}flex-basisの指定通りに子要素の幅が表示されています。下記のようにflex-wrapを設定し、親要素の幅が子要素の幅の合計より、狭くなった場合の動作をflex-basisでも確認しておきましょう。親要素にflex-wrapプロパティを追加して、wrapを設定します。flex-wrap:wrap;}子要素にflex-basisを設定した上で、親要素の幅を狭めていくと、子要素にwidthを設定した時と同様に折り返しが行われることが確認できます。flex-basisの設定とwrapの設定flex-growプロパティについて子要素の幅の合計よりも親要素の幅の領域が大きい場合、その余った領域をどの子要素に割り当てるかを決めるプロパティです。初期値では、flex-growプロパティの値は0であるため、どの領域にも割り当てられず、余った状態となります。下の図の親要素のborderの背景色のない部分が余った領域になります。最後の子要素のみに余った領域を与えたい場合は、flex-growプロパティに1を設定します。#ecf2f9;}1つ前の画像と比較するとわかるように余っていた領域が3番目の子要素の領域に組み込まれていることがわかります。flex-gropを最後の要素に設定flex-growの数字は、他の子要素に設定したflex-growの数字との相対的な大きさの比較で意味を持つため、1つの要素のみflex-growを設定している場合は、正の数字であれば、2,3などの他の数字にしても結果は変わりません。次にflex-growの動作を確認するために各子要素に設定していたflex-basisを削除します。#ecf2f9;}flex-basisを削除したことで幅が各要素のコンテンツに依存するようになり、余りの領域が増えています。余った領域を各子要素に均等に割り当てるため、flex-growプロパティの設定を行います。#ecf2f9;}flex-growをすべての子要素に設定することで、余った領域が均等に分配されていることが確認できます。子要素の2と3に余った領域を与え、その割り合いを1:2に設定したい場合は以下のようにflex-growは1とflex-growは2に設定します。flex-growの数字は、相対的な比較に使用するため、flex-growを3、flex-growを6とした場合も同じ意味を持ちます。3は1:2の割合で余った領域が分配されていることが確認できます。flex-growを1:2flex-shrinkプロパティについてflex-growでは親要素の余った領域をどの子要素の領域に分配するか設定するプロパティでしたが、flex-shrinkは、親要素が領域が狭まり、子要素の幅の設定値の合計よりも小さくなった場合、どの子要素から不足分の領域をとるかを決めるプロパティです。2つの子要素が200pxの領域を持ち、親要素が300pxの領域になった場合、不足した100px分を片方の子要素から100px確保するのかそれとも両方の領域から均等に50px確保するのかを決めるプロパティです。片方の子要素だけからとる場合は、ブラウザの表示では、片方の子要素の幅が100px,もう一方の子要素の幅が200pxで計300pxとなります。両方からとる場合は、子要素の幅はどちらも150pxとなります。親要素の不足分の領域の子要素での分配flex-shrinkの初期値は1のため、すべての子要素は均等に縮むことになります。flex-shrinkがどのような動作をするのか確認してみましょう。すべての子要素の幅をflex-basisを使用して250pxとします。#ecf2f9;}子要素1,2はflex-shrinkを0に設定し、縮まない設定にします。子要素3の変更は行いません。#c8d9eb;}親要素を狭めていくと子要素の3のみ縮むことが確認できます。子要素1,2のflex-shrinkは0に設定flex-shrinkを使用して縮む割合の変更を行います。3は縮む割合を1:2に設定します。1:2に設定した場合、子要素3の領域は、2の領域よりも2倍の速さで縮むことになります。3を比較すると1:2の割合で縮んでいることを確認できます。flex-growと同様flex-shrinkの数字も相対値のため、flex-shrinkの値を4と8にしても結果は同じになります。flex-shrinkの個別の設定方法について説明を行ってきましたが、それらのプロパティを一括で設定できるflexプロパティがあります。flexプロパティの設定には、複数の設定方法があります。100px;flexプロパティを使用して、1:2:1の幅のあるレイアウトを作成したい場合は、下記のように記述すれば簡単に作成することができます。#ecf2f9;}ブラウザの幅を広げても、縮めても子要素の幅の割合いは、1:2:1を維持します。3コラムで1:2:1レイアウト1:3:1の比への変更があったとしても子要素2のflexの値を2から3に変更するだけで完了します。flex-shrinkを0にflex-basisで幅の指定を行えば実現可能です。#f0d9da;}Flexboxで、ナビゲーションメニューを作ってみようFlexboxの機能を一通り理解できれば、ナビゲーションメニューも簡単に作成することができます。下記の4つのリストから構成されているリストにFlexboxを行い、ナビゲーションメニューを作成します。</body></html>CSSを見ると少し複雑に見えるかもしれませんが、ulタグの初期設定のmarginとpaddingを0にしています。リストスタイルをnoneにすることでリストの先頭に表示される・(点)を非表示にしています。aタグにpaddingでクリック領域を増やすためにブロック要素に変換しています。Flexboxに関する設定は、親要素ulをFlexコンテナにし、子要素の配置はspace-aroundに設定しています。子要素のliはflexを1(flex-growが1)に設定し、親要素に対して均等に幅を取る設定にしています。gray;}ブラウザで確認すると下記のようなナビゲーションバーを作成することができます。ブラウザの幅を変更しても幅に合わせて子要素間の距離も等間隔で変動します。Flexboxで、ナビゲーションメニューを作ってみよう。