【18-2】Flexbox内のボックスの配置方法を指定しよう
最終更新日：2017年11月15日 （初回投稿日：2016年09月13日）
前回に引き続き、Flexbox について。
今回は、flex-wrapプロパティ、flex-directionプロパティを使ってみましょう。
この2つのプロパティの値を一括でまとめるショートハンドプロパティ flex-flow もあります。
Flexbox に関しては、記事を分けています。
- 【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
- display: flex で「Flexコンテナ」を作ります。
flex-basis、flex-grow、flex-shrink、justify-contentプロパティを使ってみます。 - 【18-2】Flexbox内のボックスの配置方法を指定しよう ←今日はココ
- flex-wrap、flex-directionプロパティを使います。
- 【18-3】Flexbox内の縦（垂直）方向を揃えよう
- align-items、align-self、align-contentプロパティを使います。
- 【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
- orderプロパティを使います。
- （ちょっとメモ）Flexbox をシミュレーションできるサイト2件
- シミュレーションしてみると、わかりやすい！
- 【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
- Flexboxの各ブラウザの対応やベンダープレフィックスについて。
参考資料：W3C CSS Flexible Box Layout Module Level 1
flex-wrap で Flexアイテムを折り返す
flex-wrapプロパティは、Flexアイテムを折り返すか折り返さないか指定できます。
デフォルトは nowrap（折り返さない）なので、Flexコンテナの中で Flexアイテムは 一行で連なり、親コンテナの中のスペースが足りなくてもそのまま。収まりきらなければ、はみ出します。
これを、flex-wrap: wrap と指定することで、スペース内で折り返して表示させられます。
文章で読んでいるより、サンプルを見たほうがわかりやすいですね。
サンプルのウィンドウサイズを小さくしていくと、順次改行しながら表示されます。
サンプルでは、Flexコンテナに flex-wrap: wrap と指定しただけ。たったこれだけで Flexアイテムが折り返すようになるんですね。これは便利。
div#container {
display: flex;
flex-wrap: wrap;
justify-content: space-between}
div#container section {flex:1 0 100px}
flex-wrapプロパティの値は、キーワード3つだけです。
| flex-wrap の値 | |
|---|---|
| nowrap | 折り返さずシングルラインで表示します。これがデフォルト |
| wrap | Flexコンテナに合わせて折り返してマルチラインにします |
| wrap-reverse | wrap と同じく改行しますが、折り返しが逆に（上側に）向かいます。 サンプルのウィンドウサイズを小さくしていって確認してください。  |
最後の「wrap-reverse」のサンプルでは、1行あたりでの並び方は「3」「4」「5」や、「1」「2」などと、左から右へになります。
これは次に出てくる「flex-direction」プロパティの値がデフォルトの「row」のままだから。
「flex-direction : row-reverse」も組み合わせて使えば、
「6」
「5」「4」「3」
「2」「1」
といったかんじで、完全に逆順（HTML上の記述が新しいものから古いものへ）に表示できます。
こちらは最後の「ショートハンドプロパティ flex-flow」のサンプルで確認してください。
| 値の継承 | なし | 適用できる要素 | Flexコンテナ な要素 |
|---|
flex-direction で Flexアイテムの配置方向を決める
これまでのサンプルで Flexアイテムが左から右への並び方だったのは、flex-directionプロパティの指定が無くて、これがデフォルトの row だったからです。
flex-directionプロパティは、Flexアイテムの配置の方向を決めます。
デフォルトの row は「横に並ぶ」指定で、並び順は、そのHTML文書の「書字方向」に従います。
日本語や英語などの場合は、左から右（ltr）の順番です。（アラビア語などなら右から左(rtl)になります）
下の↓値の一覧では、日本語表示での解説です。
flex-directionプロパティの値は、キーワード4つです。
| flex-direction の値 | |
|---|---|
| row | ltr（left to right 左から右）に水平方向に。これがデフォルト |
| row-reverse | rtl（right to left 右から左）に水平方向に |
| column | ブロックレベル要素のように、垂直方向に上から下へ |
| column-reverse | 垂直方向に下から上へ |
| 値の継承 | なし | 適用できる要素 | Flexコンテナ な要素 |
|---|
サンプルは、ビューポートが幅400px以下の時、flex-direction: column に指定しています。
PCでご覧のかたはウィンドウサイズを小さくして確認してみてください。
サンプルにもソースを表示していますが、400px以下のときに flex-direction: column になるよう切り替えるためには、CSSのメディアクエリを使っています（7行目以降）
それ以前の指定に flex-direction: row を指定していないのはデフォだから（省略しても row）
div#container {
display:flex;
flex-wrap:wrap;
justify-content:space-between}
div#container section {flex:1 0 100px}
@media only screen and (max-width: 400px){
div#container {flex-direction:column} /*親のFlexboxコンテナに*/
div#container section {min-height:200px}
}
2つのプロパティのショートハンドプロパティ flex-flow
上記の2つのプロパティflex-wrap と flex-direction を1つにまとめるショートハンドプロパティ flex-flow があります。
flex-flow の値は1〜2個で、順番は自由。値は半角スペースで区切ります。
値が1コで flex-flow: wrap としても、flex-flow: column としてもイイんですね。省略したほうのプロパティの値はデフォルトになります。
でも、flex-direction が「column」だったら、アイテムはブロックレベル風になるので、flex-wrap が「nowrap」だろうが「wrap」だろうが関係ないよね。ですので、flex-flow: column nowrap と書いても、nowrapのほう（flex-wrapプロパティ）は無視されます。
「flex-flow: wrap-reverse row-reverse」と指定したサンプルを作ってみました。
「flex-wrap:wrap-reverse」で、折り返しが下から上に、
「flex-direction:row-reverse」で、水平方向に右から左に配置されるという指定の組み合わせです。
PCのかたはサンプルをウィンドウ幅を狭くしてみてください。
Flexボックス内のスペースに余裕があるときは、折り返さず右から左方向に並びます。Flexボックス内に余裕が無いときは、折り返しつつ下から上方向に向かう順番で並びます。
HTML文書で後に（下に）書かれたものほど上に表示するので「最新情報」などの表示に使えますね。
これが「flex-flow: wrap row-reverse」と指定すると、1行あたりの並び方が「row-reverse」なだけなので、
「2」「1」
「4」「3」
「6」「5」
という並び方になるのね。これはちょっと使い道が思いつきませんね。
（こうやって文章で説明するとややこしいけど、実際使ってみると簡単。ぜひいろいろテストしてみてください）
次回予告
次回は、Flexアイテムの Flexボックス内での縦（垂直）方向を揃えるプロパティ
align-items、align-self、align-content を使ってみましょう。
Flexアイテムを上揃えや下揃えにしたり、上下のセンターに置いたり、いろいろやってみましょう。
- 関連記事
-
- 【21】floatプロパティと clearプロパティ。そして Clearfixについて
- 【20】overflowで、あふれた中身の表示方法を指定しよう
- 【19】visibility で表示か非表示かを指定しよう
- 【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
- （ちょっとメモ）Flexbox をシミュレーションできるサイト2件
- 【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
- 【18-3】Flexbox内の縦（垂直）方向を揃えよう
- 【18-2】Flexbox内のボックスの配置方法を指定しよう
- 【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
- 【17-4-2】ルビ関連の要素のためのCSSプロパティ
- 【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに
- 【17-3-2】テーブル関連の要素のためのCSSプロパティ
- 【17-3-1】display:table でテーブルじゃない要素をテーブルっぽく
- 【17-2-2】リスト関連の要素のためのCSSプロパティ
- 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
これまで小手先のテクニックでやっていたことが,
簡単に実装できるようになってありがたいですね!
Re: No title
便利なFlexboxですが、これ、今まで
box仕様 → flexbox仕様 → flex仕様と、3段階で進化してきたので、
古いブラウザだと最新のflex仕様ではダメだったりします。
もう少しの間は Flexboxを使うのは面倒くさそうです。
このへんの話を近いうちに書く予定ですので、また見てみてくださいね。
