シリーズ第21回は、フレックスボックス（flexbox）の3回目です。これまでの2回を補う形で、これだけは覚えておきたいプロパティについて書いています。
フレックスボックス学習用のHTMLとCSS
今回は以下のファイルをベースにします。CSSでcontainerや各boxにフレックスボックスのプロパティを書いていき、挙動や表示を確認してみましょう。
HTML
<body>
<div class="container">
<div class="box box-a">A</div>
<div class="box box-b">B</div>
<div class="box box-c">C</div>
<div class="box box-d">D</div>
<div class="box box-e">E</div>
<div class="box box-f">F</div>
</div>
</body>
1つのコンテナ内にboxをA～Fまで6つ準備しています。
CSS
.container{
width: 500px;
height: 120px;
background-color: beige;
display: flex;
}
.box{
height: 24px;
width: 100px;
background-color: lightgreen;
border: 1px solid gray;
margin: 3px;
}
.box-e,.box-f{
background-color: lightsalmon;
}
containerとboxには前回と同じスタイルをあてています。少し見やすくするためにbox-eとbox-fにbackgrand-colorをあて、他のboxと色を変えてあります。 ブラウザで表示させると次の画像のようになります。
では、最初にorderプロパティについてです。
orderプロパティ
これはコンテナ内のアイテムの表示順序を変えるためのプロパティです。値には数字を入れていきます。デフォルトでは0（ゼロ）が設定されています。これに相対的な数字を指定することによりアイテムの順序を変えることができます。実例で見てみましょう。
例えば、box-dに対して
order: 1;
と記述してみます。
画像のように、Dだけ一番最後に移動しました。box-dにorder: 1; を指定したため、デフォルトで0が設定されている他のboxよりも順序が遅くなったということです。
orderプロパティの値は相対的です。例えば、box-eを一番最初にしたい場合はどうすると良いでしょうか。
画像のように、box-eに対してのみ
order: -1;
を指定しました。そのため、相対的な順序でEが一番早くなり、表示が最初になっていることを確認できます。
このように、見た目の順序を変えることができるのがorderプロパティです。もちろん、HTMLの要素を変えているのではなく、表示される順序が変わっただけです。
次に、flex-wrapプロパティについてです。
flex-wrapプロパティ
これは、アイテムが1行で表示できる範囲を超えた場合、折り返して表示するためのプロパティです。
display-flexがかかったcontainerでは、主軸方向にアイテムが多い場合、アイテムの大きさをcontainerの大きさに合わせて自動で収縮して表示します。どういうことか実際に見てみましょう。
開発者ツールでCSS情報を見てみると、boxに対してwidth: 100px; が指定されています。ちなみにcontainerに対してはwidth: 500px; になっています。しかし、6つのboxが並ぶと実際のboxの大きさは77.33px（上部赤囲み部分）になっているのを確認できます。
containerの幅500pxに対して、100pxのboxが6つ並ぶとcontainer内に収まり切りません。こうした場合、display-flexがかかったcontainerでは、アイテムの幅（width）を自動で収縮して表示しているということです。ちょうどオレンジで囲んだ部分を見ると分かりますが、本来の大きさから矢印方向へ収縮していることが表示されています。
この収縮をせずに、次の行に折り返すためのプロパティがflex-wrapです。値は以下の3つです。
- nowrap
- wrap
- wrap-reverse
nowrapはデフォルトです。折り返されず収縮して表示されます。containerに対してflex-wrap: wrap; を指定すると、コンテナ幅を超えるboxが次の行に折り返して表示されます。
上の画像のように、containerの500pxに収まらないboxが次の行に折り返され表示されています。
実際box-aの大きさを見るとよく分かります。上部赤囲み部分の数字が102pxになっています。ピッタリ100pxになっていないのは、第16回で解説したボックスサイジングが関係しています。この場合、左右のborder:1px; が足し算（100px + 2px）されていますが、自動収縮はされずに実質100pxとなっているということです。
主軸を変えてみるとどうなるでしょうか。
flex-directionと組み合わせた時の挙動
主軸の方向を縦にして、flex-wrapでwrapを指定してみましょう。
flex-direction: column;
flex-wrap: wrap;
と記述します。
今度はcontainerの高さ（height:120px）に収まらないboxが、縦方向を主軸とした次の行へ折り返されました。boxに指定されたmargin（3px）まで足し算していくとcontainerの高さを超え、box-dから折り返されて次の行へ表示されていますね。
ショートハンド
ちなみに、flex-directionとflex-wrapの組み合わせは、ショートハンドで記述できます。flex-flowプロパティを使います。
flex-direction: column;
flex-wrap: wrap;
であれば、
flex-flow: column wrap;
と記述できます。値に、column（スペース）wrapと書きます。
では、次はalign-contentプロパティです。
align-contentプロパティ
これは、フレックスボックスの交差軸方向の内部のアイテムを配置するプロパティです。
align-itemsとどう違うの？と思われるかもしれません。実際に記述して表示を確認してみましょう。まずは、おさらいも兼ねてalign-itemsでflex-endを指定してみます。
align-contentになるとどうでしょうか。同じようにflex-endを指定します。
違いが分かりましたか。ポイントは交差軸方向の内部のアイテムの配置を変えられるということです。align-itemsは行の間隔は変えずにアイテム全体に影響します。それに対してalign-contentは、コンテナ内部での配置を変えてくれるプロパティです。
このことからも分かりますが、align-contentはnowrap（1行だけ）の場合は効果がありません。wrapされ2行以上になっている時に使えるプロパティということを覚えておきましょう。
flexプロパティ
これは、コンテナに対してアイテムをどのような比率で配置するかを指定できるプロパティです。
簡単に以下のファイルで説明します。
HTML
<body style="margin: 0;">
<div class="container">
<div class="box box-a">ITEM-A</div>
<div class="box box-b">ITEM-B</div>
</div>
</body>CSS
.container{
width: 500px;
height: 120px;
background-color: beige;
display: flex;
}
.box{
height: 120px;
}
.box-a{
background-color: lightgreen;
}
.box-b{
background-color: lightsalmon;
}
これをブラウザに表示すると次のようになります。
スタイルは、box-a（ITEM-A）とbox-b（ITEM-B）にあてていきます。
それぞれにflex: 1; を記述するとどうなるでしょうか。
コンテナ幅いっぱいにアイテムが拡がりました。その比率は １：１ になっています。ITEM-Bのほうだけflex: 2; にするとどうなるでしょうか。
今度は １：２ の比率です。ではこの状態でITEM-Aをflex: 3; にするとどうでしょうか。もう予想がつくと思います。
こんなふうに、flexプロパティはコンテナ内のアイテムをどのような比率で配置するかを指定できるプロパティです。様々なプロジェクトで役立ちそうな実践的なテクニックですね。
まとめ
初心者もできる！プログラミング基礎講座【第21回】はいかがでしたか。フレックスボックス（３）として、フレックスボックスのプロパティのいくつかをご紹介しました。
- orderプロパティ
- flex-wrapプロパティ
- align-contentプロパティ
- flexプロパティ
の4つでした。
やはりフレックスボックスは奥が深い概念ですが、シリーズの第19回～第21回まででレイアウトを行う上で基礎的な部分に絞って解説してきました。わからないところがあればフレックスボックス（１）～（３）までを少し読み返して、自分で実際に記述してみてください。確実に上達していけると思いますよ！
では、次回もお楽しみに！