flexの書き方と活用方法を解説。displayプロパティに値flexを指定した上でflex-directionプロパティを併用すれば、横並び・縦並び・正順・逆順などCSSだけで表示順序を自在に指定できます。orderプロパティを併用すれば特定要素の掲載順序を番号で指定できるため、「本来なら中央に表示されるボックス」を右寄せして表示するなど、とても柔軟な配置調整ができます。文宏ホームページ作成ガイドCSSのflexを使えば、表示順を柔軟に指定してレイアウトが作れるウェブサイトのレイアウトを作る上で困るケースとして、「HTMLソースに書いた順序」と「実際に表示したい順序」が一致しない問題があります。下図のように、HTMLソース内でBOX1→BOX2→BOX3の順番で記述しているとき、それを横並びにBOX1→BOX2→BOX3の順に表示できれば良いなら、話は単純で何も問題はありません。HTMLソースの記述順と表示したい順序が一致しているなら特に問題はないが......しかし、ここでBOX2→BOX1→BOX3の順に表示したい場合が出てくると少々困ります。3段組のようにレイアウトがシンプルなうちは対応のしようがありますが、ボックスの数が増えてくると対処が難しくなるでしょう。このような問題は、レスポンシブWebデザインを採用して閲覧者の画面サイズ別に動的にレイアウトを調整したい場合など、HTMLソースを変更することなくCSSだけで様々なレイアウトを実現したい場合に発生します。CSSでレイアウトを作る場合でも「ボックスの表示順」は「HTMLソースの記述順」に影響されますから、表示できる順序の選択肢(組み合わせの数)はあまり多くありません。そのため、思い通りの柔軟なレイアウトが実現できないことも多々あります。そこで便利なのが、CSS3で追加されたflex(flexbox/フレキシブルボックス)という仕様です。HTMLソースの記述順に影響されずに自由な順番でボックスを表示できるため、とても柔軟にレイアウトを作成できます。flexを使えば、HTMLソース内の記述順序に影響されずに、CSSだけでボックス群の表示順序を指定できる上図では、HTMLソース内ではボックス1→ボックス2→......→ボックス10の順序で記述していますが、CSSを使って5→2→7→3→9......のように任意に指定した順序で表示しています。CSSのflexなら、HTMLの記述順に影響されずに表示順を指定できるdisplayプロパティに、値flexを指定するCSSが基本このように、HTMLソースに記述されている順番に影響されず、自由な順序で柔軟に表示できる仕組みが、CSSのflexです。Flexboxと呼ばれたりフレキシブルボックスと呼ばれたりもします。flexの書き方はとても簡単で、displayプロパティに値「flex」を指定した上で、並び方を指定するflex-directionプロパティや、表示順序を指定するorderプロパティなどを併用するだけです。詳しい記述方法を解説する前に、まずはCSSのflexで実現できるレイアウトの柔軟さを簡単にご紹介いたします。■CSSソース「display:flex;」だけで、ボックスは横並びに表示される下図は、10個のボックスを横並びに配置した例です。1~10までのボックスが左から順番に並んでいます。HTMLソースでも、1~10の順番で記述されています。順序は指定していませんのでHTMLの記述順に並んでいるだけですが、縦向きではなく横並びに掲載されています。flexのサンプルページのHTMLソースをご覧下さい。:10個のボックスをHTMLの記述順で横並びにレイアウトすると、このように表示されます。このとき、横並びにするかどうかや、横並びの場合に左から並べるのか右から並べるのかといった掲載方向の指定には、flex-directionプロパティを併用します。flex-directionを省略した場合には「左端から横並び」だと解釈されるため、上図のように並びます。flexで特定の子要素(ボックス)だけを先頭に配置flexの記述に加えてorderプロパティを使えば、これら10個のボックスのうち8番目だけを先頭に回すような特殊な配置も実現できます。HTMLソースを一切書き換えることなく、CSSソースだけで特定の子要素を1番目に移動させられます。flexサンプルページの3番目の例をご覧下さい。flexで複数の子要素(ボックス)を末尾へ配置もちろん順序を指定可能なのは1つだけではありません。下図のように、4番と6番を末尾に配置することもできます。特別な掲載位置を指定したい要素1つ1つに対して、望みの順序をorderプロパティで指定すれば良いだけです。このように、HTMLソースを書き換えることなく、CSSソースだけで特定の子要素を最後尾へ追いやることができます。flexサンプルページの4番目の例をご覧下さい。flexでボックス1つ1つに順序を指定し、望み通りの順番で表示さらに、すべてのボックスに対してorderプロパティで順序を指定すれば、下図のように完全に自由な順序指定(5→2→7→3→9→4→8→10→1→6)で表示することもできます。この方法を使えば、表示順を調整する目的でHTMLソースを修正する必要はなくなるでしょう。flexサンプルページの5番目の例をご覧下さい。flexの使いどころ:PC/モバイル両対応のレスポンシブなレイアウト「HTMLに書いた順序」と「実際に表示したい順序」が一致しなくなるためにCSSのflexを使うと便利な状況として、以下に2つのレイアウト例をご紹介いたします。順に配置したい場合です。淡い黄色部分が「メイン段」で、淡い青色部分が「メニュー段」の場合には、このように希望する場合もあるでしょう。「各ボックスの表示順」が「HTMLソースの記述順」に依存していると、このような変化の実現は面倒です。flexサンプルページA)の実現方法は、本記事の3ページ目で解説しています。レスポンシブWebデザインの記述方法を使って、flex-directionプロパティの値を変化させたり、orderプロパティで表示順を変更したりすることで実現しています。flexレイアウト例2:広い画面と狭い画面とで望ましい表示順が異なるケース複数のボックスを広い画面で見渡せる場合には「時系列」の順序で表示したいが、見渡せる幅の狭い画面では「重要な項目」のみを先に見せたい場合です。この場合も、「ボックスの表示順」が「HTMLソースの記述順」に依存していると、実現は難しいでしょう。flexサンプルページB)の実現方法は、本記事の4ページ目で解説しています。レスポンシブWebデザインの記述方法を使って、flex-directionプロパティの値を変化させたり、orderプロパティにマイナスの値を指定することで先頭に移動したり、displayプロパティを使ってflexを解除したりする方法を使って実現しています。上記の2例で示したような大きなレイアウト(表示順)の変更でも、flexを使えばCSSだけで簡単に実現できます。(※Edgeは最初のバージョンから使用可能)CSSのflexは、代表的なブラウザの最新バージョンではどれでも表示可能です。具体的には、Edge、IE11以降、Firefox28以降、Chrome29以降、Safari9以降、Opera17以降のバージョンで表示できます。ベンダープレフィックス「-webkit-」を加えれば、Chrome21以降、Safari6.1以降、Opera12.1以降でも表示可能になります。IE10以下は対象外とするしかありませんが、今となっては気にする必要は無いでしょう。してもIE10以下のことも気にするのであれば、flexによる順序指定が効かなくても意味は通じる程度の使用に留めておくと良いでしょう。それでは次のページから、CSSのflexを活用する具体的な記述方法をご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。