Flexboxの書き方入門（4）アイテムの詳細な位置合わせ【図解たっぷり】

｜ 9559 PV ｜ 2021.08.19

favorite_border

これまで何度かFlexboxについて解説をしてきました。
『便利なのはわかるんだけど、イマイチ実際にどこでどう使ったら良いかわからない。」
「横や縦に並べるだけしかできないの？」と感じている方もいらっしゃるかもしれません。
そこで今回は少し応用的な使い方をご紹介していきます。

コンテンツを自動で折り返す：横並び
コンテンツを自動で折り返す：縦並び
コンテンツの位置を揃える方法：横
コンテンツの位置を揃える方法：縦
応用：アイテムを中央に配置する
まとめ

コンテンツを自動で折り返す：横並び

Flexboxはとてもかしこいため、下の図のようにブラウザの幅に合わせてコンテンツも伸び縮みします。

ブラウザ幅が広いとき

ブラウザ幅が狭いとき

このようにブラウザ幅に合わせてコンテンツのサイズも変化するのですが、特にスマートフォンやタブレットなどPCよりも画面が小さい場合、図のA のように幅の狭いコンテンツはみづらくなってしまいます。

flex-wrapプロパティを使用して複数行で表示する

そこで今回は指定した幅＜コンテンツ幅となった場合に自動でコンテンツを折り返す（複数行で表示する）方法をご紹介していきたいと思います。

たとえば図のようにA〜Eまでのコンテンツを含むcontainerがあるとします。

しかしこのA〜Eまでのコンテンツを１行ではなく複数行に渡って表示したい場合に使用するのが

flex-wrap; ○○；

というプロパティです。

とは言ってもことばだけでは「なんのこっちゃ」というかんじですよね。
実際にコードを書いてブラウザで確認してみましょう。

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

html

<div class="container">
    <div class="A">
        <p>A</p> 
    </div>
    <div class="B">
        <p>B</p> 
    </div>
    <div class="C">
        <p>C</p> 
    </div>
    <div class="D">
        <p>D</p> 
    </div>
    <div class="E">
        <p>E</p> 
    </div>
</div>

css

.container{
    display: flex;
    max-width: 600px;
    height: 150px;
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
}

.container , p {
    text-align: center;
    color: white;
    font-size: 40px;
}

.A{
    width: 50px;
    background: #b8860b;

}
.B{
    width: 100px;
    background: #d2691e;

}
.C{
    width: 150px;
    background: #9370db;
}
.D{
    width: 200px;
    background: #87cefa;
}
.E{
    width: 250px;
    background: #4169e1;
}

ではCSSに

flex-wrap; ○○；

というプロパティを追加してみましょう。

css

.container{
    display: flex;
    /*以下のコードを追加*/
    flex-wrap: wrap;
    /*以下のコードを変更*/
    max-width: 600px;
}

ブラウザを更新して確認してみましょう。

container幅の600pxを超えたコンテンツは折り返され、表示が１行から複数行に変わっていることがわかります。

flex-wrap: wrap; 解説

先ほど

flex-wrap; wrap；

というプロパティを使用して折り返された（複数行で表示された）
５つのコンテンツは、指定された600pxを超える手前でコンテンツが次の行に改行されたような状態になっています。

flex-wrap; wrap；

というプロパティを使うとFlexboxが自動的にコンテンツの幅を確認して指定されたcontainer幅を超えないように調整してくれるのです。

「でもちょっとまって！container幅に合わせて折り返してくれるのはいいけど、中途半端にスペースが余ってるじゃないか！！」

と感じた方も多いのではないでしょうか？

確かに、２行になった際に余白（ポジティブフリースペース）が発生してしまっています。

しかし、そこは我らがFlexboxです。この余白問題も簡単に解決できます。

ポジティブフリースペースを割り振る

今、cssには

flex-wrap; wrap；

というプロパティを追加したことで余白が発生しています。

この余白を各コンテンツに割り振れば良いのです。

例えば

この余白を１行目はABC、２行目はDEに均等に割り振るにはどうしたら良いでしょうか？

以前コチラのブログで解説したように

flex-wrap;  1 0 ○○px;

というプロパティを使用すれば良いだけなのです！

ではcssを追加してみましょう。

css

.A{
/*以下を変更*/
    flex: 1 0 50px;
    background: #b8860b;
}
.B{
/*以下を変更*/
    flex: 1 0 150px;
    background: #d2691e;

}
.C{
/*以下を変更*/
    flex: 1 0 200px;
    background: #9370db;
}
.D{
/*以下を変更*/
    flex: 1 0 250px;
    background: #87cefa;
}

.E{
/*以下を変更*/
    flex: 1 0 300px;
    background: #4169e1;
    }

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

ポジティブフリースペースを均等に分配することができました！

ちょっと応用編：折り返しを逆にする方法

先ほどは

flex-wrap; wrap；

を使用することで１行目がABC、２行目がDEという並び方になっていました。

しかし、コンテンツの内容やサイズから、下の図のように１行目がDE、２行目がABCという並び方にしたい場合も出てくるかもしれません。

これもとても簡単です。

flex-wrap; wrap；

を

flex-wrap: wrap-reverse;

と変更するだけです。

冒頭で登場した

<div class="container">
    <div class="A">
        <p>A</p> 
    </div>
    <div class="B">
        <p>B</p> 
    </div>
    <div class="C">
        <p>C</p> 
    </div>
    <div class="D">
        <p>D</p> 
    </div>
    <div class="E">
        <p>E</p> 
    </div>
</div>

css

.container{
    display: flex;
    max-width: 600px;
    height: 150px;
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
}

.container , p {
    text-align: center;
    color: white;
    font-size: 40px;
}

.A{
    width: 50px;
    background: #b8860b;

}
.B{
    width: 100px;
    background: #d2691e;

}
.C{
    width: 150px;
    background: #9370db;
}
.D{
    width: 200px;
    background: #87cefa;
}
.E{
    width: 250px;
    background: #4169e1;
}

のコードを使用して実際にブラウザで結果を確認してみてくださいね。

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

コンテンツを自動で折り返す：縦並び

では次はcontainerの高さが決まっている場合に、自動でコンテンツを１列目、２列目というように縦に並べる方法をご紹介します。

使用するhtmlコードは横並びの時と同じなので省いてcssのみコードの例をご紹介します。

css

.container{
    max-height: 600px;
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
}

.container , p {
    text-align: center;
    color: white;
    font-size: 40px;
}

.A{
    height: 50px;
    background: #b8860b;
}
.B{
    height: 150px;
    background: #d2691e;

}
.C{
    height: 200px;
    background: #9370db;
}
.D{
    height: 250px;
    background: #87cefa;
}

.E{
    height: 300px;
    background: #4169e1;
}

ブラウザで表示すると、指定の高さ600pxから大きくはみ出しているのがわかります。

コチラも横向きの時と同様にプロパティを追加するだけで解決できます。

css

container{
    max-height: 600px;
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
    /*以下を追加*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

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

このようにコンテンツが１列目、２列目と言うように縦に並んでいるのがわかります。

課題

下記の図では１列目ABC、２列目がDEとなっています。

これを１列目がDE、２列目をABCとなるようにしましょう。

またポジティブフリースペースが発生した場合は各コンテンツに均等に割り振ってみましょう。

ヒント

列の入れ替えの方法は、行（横並び）の入れ換えと同じ方法を使います。

コンテンツの位置を揃える方法：横

次にコンテンツを横並びにした際にできたポジティブフリースペースとコンテンツの位置を簡単に調整する方法をご紹介します。

まずは次のコードを準備してください。

html

<div class="container">
    <div class="A">
     <p>A</p> 
    </div>
    <div class="B">
        <p>B</p> 
    </div>
    <div class="C">
        <p>C</p> 
    </div>
</div>

css

.container{
    display: flex;
    flex-direction: row;
    max-width: : 600px;
    .container{
/*borderの設定*/
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
}

.container , p {
    text-align: center;
    color: white;
    font-size: 40px;
}

.container > div {
    flex: 0 0 30%;　/*container内の全てのdiv要素のサイズを30％に設定*/
}

.A{
    background: #b8860b;
}

.B{
    background: #d2691e;
}

.C{
    background: #9370db;
}

するとブラウザの表示はこのようになります。

このブラウザの表示ではABCのBOXが左揃えになっています。

実はコンテンツを横並びにする際には

justify-content: ○○;

と言うプロパティを使用するのですが、cssに追記しなくても初期値としてコンテンツを左揃えにする為の

justify-content: flex-start;

と言うプロパティが設定されています。

実際に先ほどのcssにプロパティを追加して

css

.container{
    display: flex;
    flex-direction: row;
    /*以下を追加*/
    justify-content: flex-start;
    max-width: : 600px;
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
}

としてもブラウザでの表示は何も変化はおきません。

もっとjustify-content:

では左揃え以外の例も確認していきましょう。

まずは反対の右揃えです。

余白を左右（両サイド）に均等に配置してコンテンツを中央に寄せます。

左右の余白をなくし、各コンテンツの間に均等に余白を配置します。

各コンテンツの間の均等な余白＋左右にその半分の幅の余白を配置します。

特に最後の

justify-content: space-around;

はこのような３つのメインコンテンツの配置などの際に便利ですね！

コンテンツの位置を揃える方法：縦

では次に異なる高さのコンテンツの位置を揃える方法を見ていきましょう。

例として使用するコードは先ほどと同じコードですがBOXの高さに違いを出すために、各BOXのフォントサイズを変更し、Bは２行表記にしています。

html

<div class="container">
        <div class="A">
         <p>A</p> 
        </div>
        <div class="B">
            <p>B</p> 
            /*1行追加*/
            <p>真ん中のBOXです</p>
        </div>
        <div class="C">
            <p>C</p> 
        </div>
</div>

css

.container{
    display: flex;
    max-width: : 600px;
/*borderの設定*/
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
}

.container , p {
    text-align: center;
    color: white;
}

.container > div {
    flex: 0 0 30%;　/*container内の全てのdiv要素のサイズを30％に設定*/
}

.A{
    background: #b8860b;
    font-size: 40px;
}

.B{
    background: #d2691e;
    font-size: 30px;
}

.C{
    background: #9370db;
    font-size: 20px;
}

これをブラウザで確認するとこのようになっています。

「せっかく高さに違いを出すためにフォントサイズを変えたり、BOXBは２行あるのに同じ高さになっているじゃないか！！」

と感じた方、とても鋭いです！

コンテンツの高さの位置については

align-items: ○○;

と言うプロパティを使用するのですが、cssに何の記述もしなくても

align-items: stretch;

と言うコンテンツの高さを揃えるためのプロパティが初期値として設定されている為、高さを揃えた表示になっているのです。

コチラも試しにcssに

align-items: stretch;

とプロパティを追加して確認してみましょう。ブラウザの表示に変化はないはずです。

もっとalign-items

では他の色々な例を見ていきましょう。

各コンテンツの上のラインで位置を揃えます

各コンテンツの下のラインで位置を揃えます

各コンテンツの中央のラインで位置を揃えます

ベースライン揃え

このように横並び・縦並び共にたった数行のcssでレイアウトの変更が可能になります。

chapter-2　課題解答

chapter-2の課題の解答例です。

1.列を入れ替える
css

.container{

    height: 600px;
    border: solid;
    border-width: 5px;
    border-color: #abcf3e;
    /*以下を追加*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap-reverse;
}

2.ポジティブフリースペースを均等に割り振る

.A{
    flex:1 0 50px;
    background: #b8860b;

}
.B{
    flex: 1 0 150px;
    background: #d2691e;

}
.C{
    flex: 1 0 200px;
    background: #9370db;
}
.D{
    flex: 1 0 250px;
    background: #87cefa;
}
.E{
    hflex: 1 0 300px;
    background: #4169e1;
}