Flexboxの書き方入門（2） 位置を整える【図解たっぷり】

htmlとCSSを使っていて困ることの１つに「なんで指定した場所に画像が表示されないの⁉」「いや、だからどまんなかに表示したいんだってば!!」などのレイアウトの指定があるのではないでしょうか。

ここは今回もやはりFlexboxに解決して頂きましょう！

「Flexboxってそもそもなんぞや？」という方は、まずこちらのFlexbox超入門でFlexboxの基本編を読んでみてください。

今まで苦労してたのは何だったの⁉と言いたくなるような便利な機能がまだまだたくさんあります！

• アイテムの並び順を揃える
• Flexアイテムを横方向にそろえる
• orderで並び順を変更する
• 並べる方向を変更する

アイテムの並び順を揃える

アイテムの並び順って言われても何のことかよくわかりませんよね。
要するにこういうものです。

このようにA～Fまでのコンテンツが緑の枠のcontainerの中に並んでいます。

「でもやっぱりBFACDEの順で並べたいなぁ…。」となった場合、どのような方法があるでしょうか。floatを使ったり、画像そのものを作り直したり…。

方法がないわけではないですが、どれもちょっと面倒そうです。

ちなみにFlexboxの並び順の変更は縦でも活用できます。

「Bを一番上に持ってきた方がいいかも…。」とアイディアが浮かんだらすぐに実践してみることができるのもFlexboxのおおきな強みですね。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

Flexアイテムを横方向にそろえる

さてそれでは実践に移りましょう。

今回はこのようなWebページをつくるとしましょう。

画面中央に大きなBIG IMAGEがあり、その下に３つのメインコンテンツがあるようなページです。割とよく見るレイアウトなのではないでしょうか。

赤枠で囲まれているA～Cのコンテンツは、A→B→Cの順に並んでいます。

でも色味としてCを中央に持ってきたい！つまり、A→C→Bの順番に並び替えたい！といった場合を確認していきましょう。

orderで並び順を変更する

まずは基本を確認していきましょう。冒頭のA～Fまでのboxが並んでいます。

コチラのコードは以下のようになっています。

【html】

<div class="container">
    <div class="boxA">A</div>
    <div class="boxB">B</div>
    <div class="boxC">C</div>
    </div>

【css】

.container {
    max-width: 480px;
    border: solid 6px #abcf3e;
    display: flex;
}
    .container > div {
    flex: 1 1 0;
    text-align: center;
}

.boxA {
    background-color: #CDDC39 ;
}

.boxB {
    background-color: #FFA000 ;
}

.boxC {
    background-color: #673AB7 ;
}

.boxD {
    background-color: #2196F3 ;
}

.boxE {
    background-color: #1976D2;
}

.boxF {
    background-color: #9C27B0 ;
}

ちなみに

.container > div {
    flex: 1 1 0;
}

とは、

【html】

<div class="container">
    <div class="boxA">A</div>
    <div class="boxB">B</div>
    <div class="boxC">C</div>
    <div class="boxD">D</div>
    <div class="boxE">E</div>
    <div class="boxF">F</div>
</div>

の container内のdiv全てにcssを適用するときに使う方法です。

boxの並び順を変更する

コチラではA→B→C→D→E→Fの順にboxは並んでいます。仮に「Cのboxを先頭にもってきたい！」という場合どうすればいいでしょうか。

これはとても簡単です。cssに以下の一文を加えるだけで実現できます。

.boxC {
  background-color: #673AB7 ;
    /*以下のコードを追加*/
    order: -1;
}

保存して、ブラウザを更新ます。

なんと！Cのboxが先頭にきています！

boxを前に移動する

しかし、なぜboxCのcssに

{
    order: -1;
}

というコードを追加しただけで、先頭に配置することができたのでしょうか。

実はコンテナ内のA～Fのboxはdisplay: flex;によって並び順の初期値が「0」に設定されています。

並び順が「0」の場合は、boxはコードが書かれた順番通りに並んでいきます。

つまり今回のコードであればA→B→C→D→E→Fの順に並びます。

他のboxよりも前や後ろに配置したい場合は、例としてあげたように

.boxC {
  background-color: #673AB7 ;
    /*以下のコードを追加*/
    order: -1;
}

と、並び順を表すorderというプロパティを正負の数で指定することでhtmlのコードそのものを変更せずにboxの並び順だけ変更することができます。

boxを後ろへ移動する

今、先頭にCのboxがきています。

では、次にB→Dの順でboxを最後尾に移動させてみましょう。

コチラも先ほどと同様にcssに1行追加するだけです。

.boxB {
    background-color: #FFA000 ;
    /*以下のコードを追加*/
    order: 1;
}

.boxD {
    background-color: #2196F3 ;
    /*以下のコードを追加*/
    order: 2;
}

ブラウザを更新します。

↓

並び順が変わっているのがわかります。

order まとめ

container内のboxには全て初期値としてorder: 0 ;がわりふられています。

コンテンツの並び順を変える場合、前にする場合は負の数（マイナス）をプロパティで設定します。

並び順を後ろへ変更する場合は正の数（1,2,3…など）を設定します。

並べる方向を変更する

これまでFlexboxは主にコンテンツを横並びにしたり、横並びにしたコンテンツの幅を整えたり…と横向きのレイアウトに使用するものとして登場してきました。

しかしFlexboxのすごいところは縦にも対応している点です。

課題に挑戦
chapter3の冒頭で登場した

の3つのboxをA→C→Bの順番に並び替える際のcssを考えてみましょう。

【html】

<div class="container">
    <div class="boxA">A</div>
    <div class="boxB">B</div>
    <div class="boxC">C</div>
    </div>

解答例　クリックして表示してください

==============================

flex-direction で方向は思いのまま

今回紹介するのは

flex-direction: 〇〇;

というプロパティです。

この〇〇の部分でコンテンツを並べる方向を指定することができます。

では実際にみていきましょう。

以下のコードを使用します。

【html】

<div class="container">
    <div class="boxA">A</div>
    <div class="boxB">B</div>
    <div class="boxC">C</div>
</div>

【css】

.container {
    border: solid 6px #abcf3e;
    max-width: 600px;
    display: flex;
}

.boxA {
    background-color: #CDDC39 ;
    flex: 0 0 100px;
}

.boxB {
    background-color: #FFA000 ;
    flex: 0 0 150px
}

.boxC {
    background-color: #673AB7 ;
    flex: 0 0 200px;
}

ブラウザはこのように表示されています。

今、container内のboxはA→B→Cというように左から右にならんでいますが、

flex-direction: 〇〇;

という表記はcssのどこにもみあたりません。

実は、このA→B→Cのように左から右へコンテンツが並ぶことが初期値となっている為、特に指定しなくてもコンテンツは左から右へ並んでくれるようになっています。

指定が必要な場合は

flex-direction: row;

と記述します。

では確認してみましょう。

【css】

.container {
    border: solid 6px #abcf3e;
    max-width: 600px;
    display: flex;
    /*以下の一文を追加*/
    flex-direction: row;
}

ブラウザを更新します。

先ほどと表示内容は変わりませんがflex-direction: row;が左→右の順番の並び替えを担当していることがわかりますね。

コンテンツを右→左へ並び変える

では次にcontainer内のコンテンツを全て右→左の順番に並び変える方法を紹介します。

こちらもcssに1行追加するだけです。

【css】

.container {
    border: solid 6px #abcf3e;
    max-width: 600px;
    display: flex;
    /*以下に変更*/
    flex-direction: row-reverse;
}

ブラウザを更新します。

container内のboxだけではなく、余白（ポジティブフリースペース）も含めて全ての内容が右→左の順に並び変わっているのがわかります。

コンテンツを縦に並び変える

では次にコンテンツを縦に並べ替えてみましょう。

こちらも

flex-direction: 〇〇;

を使用すれば簡単です。

プロパティには行を意味するcolumnを使用します。

【css】

.container {
    border: solid 6px #abcf3e;
    max-width: 600px;
    display: flex;
    /*以下に変更*/
    flex-direction: colum;
}

ブラウザを更新してみます。

たった1行でcontainerの中身が縦並びになりました。

また察しの良い方はお気づきかもしれませんが、この上下の並びを逆方向にするには

flex-direction: column-reverse;

を使用します。

【css】

.container {
    border: solid 6px #abcf3e;
    max-width: 600px;
    display: flex;
    /*以下の一文を追加*/
    flex-direction: column-reverse;
}

ブラウザを確認しましょう。

このように上下の並びが変わっているのがわかります。

ちなみに、htmlで指定したベースサイズは縦並びにすると高さとして反映されることになります。

flex-direction　まとめ

Flexbox超入門編はコチラ

Flexboxを使ったWebページレイアウト入門【図解たっぷり】

HTML/CSSを動画で学ぼう

基礎から学びたい人のためのHTML入門【動画で学ぼう】

基礎から学びたい人のためのCSS入門【動画で学ぼう】