Flexboxの書き方入門(3)色々なプロパティを知る【図解たっぷり】

FlexboxのCSSに困惑したことがある方に朗報です

今回は知っていると得するFlexboxのプロパティについて紹介していきます。

Flexboxに関する解説をネットで見ているとCSSの表記が多種多様です。
例えば

【css】

.box1 {
    flex: 1 1 0;
}

.box1 {
    flex: 1;
}

が同じ意味だったりします。

魔女の宅急便の「私このパイ苦手なのよね」と言った少女のような表情で、「私Flexbox苦手なのよね」と言いたくなってしまいます。

知っておいて損はない!!

Flexboxは基礎さえ理解していれば、プロパティの指定1つでできることの幅が広がります。

レイアウトの変更が簡単かつ、すっきりとしたわかりやすいコードを書くこともできるようになります。

ベースサイズをautoに指定した場合

基本のおさらい

いきなりベースサイズをautoに指定といわれても「???」となってしまいそうですよね。

まずは基礎をおさらいしてみましょう。

以下のhtmlファイルとcssファイルを作成してください。
※box2のみ2行になっているのはブラウザで表示した際に高さをだす為です。

【html】

<div class="container">
    <div class="box1">
        <h4>box1</h4>
    </div>

    <div class="box2">
        <h4>box2</h4>
        <p>中央のBOXです</p>
    </div>

    <div class="box3">
        <h4>box3</h4>
    </div>
</div>

【css】

.box1 {
    background-color: #CCE3AD ;
}

.box2 {
    background-color: #7ACAD4 ;
}

.box3 {
    background-color: #4AA0D8 ;
}

こちらをブラウザで表示してみましょう。

この縦に並んだbox1~box3をCSSに1行追加するだけで横並びへとかえることができるのがFlexboxでしたね。

それではcssに追加しましょう。

【css】

/* 以下のコードを追加*/ 

.container {
    display: flex;
}

ブラウザを更新します。

横並びになりました!!……というのがFlexboxでしたね。

Flexboxのプロパティ

さて、ではいよいよFlexboxのプロパティについてみていきましょう。

基本は

【css】

.〇〇 {
    flex :伸張比 縮小比 〇〇px
}

という書き方をします。伸張比や縮小比がわからない方はコチラのブログで確認してください。

上のプロパティの〇〇pxにあたる部分がベースサイズと呼ばれる部分です。

変化がわかりやすいように、containerの幅を900pxに指定し、枠をつけておきましょう。

【css】

 .container {
    display: flex;
    /* 以下のコードを追加*/
    max-width: 900px;
    border: solid 6px #abcf3e;
}

ブラウザを更新します。

flex: 0 0 auto; にするとどうなるか

containerの中身(コンテンツ)である、box1~box3は

.〇〇 {
    flex :伸張比 縮小比 〇〇px
}

というプロパティを使用して幅(〇〇pxの部分)を自由に設定できる状態になっています。

例えばこれを

.〇〇 {
    flex :0 0 auto;
}

というように設定するとどうなるでしょうか。

伸張比も縮小比も設定せずに、ベースサイズをautoに設定します。
するとコンテンツにあわせた横幅でFlexboxが勝手に幅を調整してくれます。

イメージ的にはこんな感じです。

この

.〇〇 {
    flex : 0 0  auto
}

.〇〇 {
    flex :none;
}

と短縮することができます。

autoを使った3大プロパティ

では上の基本を踏まえて少し応用的な内容を見ていきましょう。

ベースサイズにautoを使う場合

.〇〇 {
    flex :伸張比 縮小比 auto
}

と記述せずに短縮して記述することができます。

コンテナに合わせて自動で割り振る

先ほどの

.〇〇 {
    flex :0 0 auto;
}

では、各コンテンツのサイズからFlexboxが幅を自動的に計算して割り振ってくれていました。

しかし、コンテナには余白ができています。余白をなくし、各コンテンツをコンテナ内に均等に配置したい場合は

.〇〇 {
    flex :1 1 auto;
}

と記述します。

例として使用していた以下のコードを使って確認してみましょう。

【html】

<div class="container">
    <div class="box1">
        <h4>box1</h4>
    </div>

    <div class="box2">
        <h4>box2</h4>
        <p>中央のBOXです</p>
    </div>

    <div class="box3">
        <h4>box3</h4>
    </div>
</div>

【css】

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

.box1 {
    background-color: #CCE3AD ;
}

.box2 {
    background-color: #7ACAD4 ;
}

.box3 {
    background-color: #4AA0D8 ;
}

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

ではcssに追記してみましょう。

【css】

.box1 {
    background-color: #CCE3AD ;
    /* 以下のコードを追加*/
    flex: 1 1 auto;
}

.box2 {
    background-color: #7ACAD4 ;
    /* 以下のコードを追加*/
    flex: 1 1 auto;
}

.box3 {
    background-color: #4AA0D8 ;
    /* 以下のコードを追加*/
    flex: 1 1 auto;
}

ブラウザを更新します。

boxの幅を確認してみると……

このように、元のコンテンツに合わせてFlexboxが自動的に幅を計算してコンテナ内に収まるように割り振ってくれているのがわかります。

この

.〇〇 {
    flex :1 1 auto;
}

.〇〇 {
    flex :auto;
}

と短縮して記述することができます。念のため確認してみましょう。

cssを以下のように変更します。

【css】

.box1 {
    background-color: #CCE3AD ;
    /* 以下のコードを変更*/
    flex: auto;
}

.box2 {
    background-color: #7ACAD4 ;
    /* 以下のコードを変更*/
    flex: auto;
}

.box3 {
    background-color: #4AA0D8 ;
    /* 以下のコードを変更*/
    flex: auto;
}

ブラウザを更新します。

boxの幅を確認してみると……

こちらも、先ほどと同じようににコンテンツの幅が自動で計算されて配置されているのがわかりますね。

余剰スペースを自動で削る

次にコンテナよりもコンテンツサイズが大きく、余剰スペースができてしまった場合について見てみましょう。
まずは以下のファイルを準備してください。

【html】

<div class="container">
    <div class="box1">
        <p>box1</p>
    </div>

    <div class="box2">
        <h4>box2</h4>
        <p>中央のboxです</p>
    </div>

    <div class="box3">
        <p>box3</p>
    </div>
</div>

【css】

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

.box1 {
    background-color: #CCE3AD ;
    width: 100px;
}

.box2 {
    background-color: #7ACAD4 ;
    width: 100px;
}

.box3 {
    background-color: #4AA0D8 ;
    width: 300px;
}

ブラウザで表示してみましょう。

460pxのコンテナ内に100px+100px+300pxの計500pxのコンテンツを配置しています。その為本来であればコンテナからコンテンツがはみ出していなければいけません。

しかしFlexboxは自動でコンテンツの幅を調整し、コンテナ内に収まるようになっている為ブラウザでネガティブフリースペースが表示されることはありません。

ここが少し複雑な点ですが、考え方としては460pxのコンテナに対して500pxのコンテンツなので40pxのネガティブフリースペースができている、ということです。

考え方

この余剰スペース(ネガティブフリースペース)もautoを使用すれば自動で割り振ることができます。ネガティブフリースペースを自動で割り振る場合は

.〇〇 {
    flex : 0 1 auto;
}

を使用します。この場合、伸縮率は0のままです(ポジティブフリースペースがない為)。

ちなみに

.〇〇 {
    flex : 0 1 auto;
}

.〇〇 {
    flex : 0 1 initial;
}

と短縮することも可能です。

ベースサイズをwidthプロパティで指定してみよう

では次に

.〇〇 {
    flex : 0 1 auto;
}

とベースサイズを指定する

.〇〇 {
    width: 〇〇px;
}

を一緒に使う場面を見ていきましょう。
例としては以下のようなコードになります。

【html】

<div class="container">
    <div class="box1">
        <p>box1</p>
    </div>

    <div class="box2">
        <h4>box2</h4>
        <p>中央のboxです</p>
    </div>

    <div class="box3">
        <p>box3</p>
    </div>
</div>

【css】

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

.box1 {
    background-color: #CCE3AD ;
    flex: 0 0 auto;
    width: 100px;
}

.box2 {
    background-color: #7ACAD4 ;
    flex: 0 0 auto;
    width: 200px;
    }

.box3 {
    background-color: #4AA0D8 ;
    flex: 0 0 auto;
    width: 300px;
}

しかし、ここで走れメロスのメロスのように激怒してしまった方もいるのではないでしょうか。

お怒りはごもっともです。

しかしこれには理由があります。Flexboxはコンテンツを横並びにするのに便利な機能なのですが、なんとコンテンツを縦に並べることもできるのです。

コンテンツが横並びの場合

.〇〇{
    flex: 0 0 auto;

の〇〇pxの部分(ベースサイズ)で横幅を指定することができます。

しかし、コンテンツが縦並びの場合、ベースサイズで指定するのは高さになってしまうのです。

その為、

.〇〇{
    flex: 0 0 auto;
    width: 300px;
    

のようにautoを使用する場合は、別でwidthを指定する必要があるのです。

……とここまで解説しましたが、こんなに細かな部分まで覚えておく必要はないでしょう。そういった仕組みになっている、となんとなく知っておけばOKです。

margin/padding/border

ここまで見てきたように、Flexboxを使用するとmarginやpaddingは適応されません。

例えば、

.〇〇 {
    flex :0 0 auto;
}

を使用してコンテンツの幅を自動的に割り振った場合はコンテナ内はコンテンツのみとなり、marignやpaddingなどは含まれていませんでしたね。

では、コンテンツにmarginやpaddingを設定したい場合はどうしたらよいのでしょうか。

marginを設定してみよう

ではさっそくmarginの設定方法を確認してみましょう。

まずは以下のようにhtmlとcssを設定します。

【html】

<div class="container">
    <div class="box1">
        <p>box1</p>
    </div>

    <div class="box2">
        <h4>box2</h4>
        <p>中央のboxです</p>
    </div>

    <div class="box3">
        <p>box3</p>
    </div>
</div>

【css】

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

.box1 {
    background-color: #CCE3AD ;
    width: 100px;
}

.box2 {
    background-color: #7ACAD4 ;
    width: 200px;
    }

.box3 {
    background-color: #4AA0D8 ;
    width: 300px;
}

ブラウザを更新するとこのようになります。

この状態ではbox1~box3はぴったりとくっついています。

ではこのbox1~box3の間にそれぞれ24pxのmarginを設定する場合を例にみていきましょう。

marginの設定はとても簡単です。今回はbox1とbox2の右側にmarginを設定する為cssは以下のようになります。

【css】

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

.box1 {
    background-color: #CCE3AD ;
    width: 100px;
    /* 以下のコードを変更*/
    margin-right: 24px;
}

.box2 {
    background-color: #7ACAD4 ;
    width: 200px;
    /* 以下のコードを変更*/
    margin-right: 24px;
    }

.box3 {
    background-color: #4AA0D8 ;
    width: 300px;
}

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

確かにmarginの設定はうまくいっているようですが、コンテナの右側には余白が残っています。

ベースサイズを変更すればコンテナ内にきっちりと各コンテンツを収めることは可能です。

ただ毎回コンテナ(900px)-{box1(100+24px)-box2(200+24px)-box3(300px)}=余白(252px)
と計算して、box1~box3に各84pxを割り振る……なんてあまりにも面倒ですよね。

このような場合は、cssに以下のように1行だけ追加してみましょう。

.box1 {
    background-color: #CCE3AD ;
    margin-right: 24px;
    /* 以下のコードを変更*/
    flex: 1 0 100px;
}

.box2 {
    background-color: #7ACAD4 ;
    margin-right: 24px;
    /* 以下のコードを変更*/
    flex: 1 0 200px;
    }

.box3 {
    background-color: #4AA0D8 ;
    /* 以下のコードを変更*/
    flex: 1 0 300px;
}

ブラウザを更新します。

このように各boxの伸長率を1、ベースサイズをboxの元のサイズで設定すると余白(ポジティブフリースペース)をFlexboxが計算して自動で均等に割り振ってくれるのです。

例えばこのようにmarginをつけて各boxの大きさをそろえて配置したい時などには非常に便利な機能です。

margin以外のpaddingやborderに関しても基本的な考え方は同じなので、色々試してみてくださいね。

たった1行でコンテナ内を均等割にする方法

では最後はコンテナ内に配置する3つのboxのサイズを均等にしたい場合のプロパティをみていきましょう。

ここに幅900pxのコンテナとbox1/box2/box3の3つのコンテンツがあります。

【html】

<div class="container">
    <div class="box1">
        <p>box1</p>
    </div>

    <div class="box2">
        <h4>box2</h4>
        <p>中央のboxです</p>
    </div>

    <div class="box3">
        <p>box3</p>
    </div>
</div>

【css】

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

.box1 {
    background-color: #CCE3AD ;
}

.box2 {
    background-color: #7ACAD4 ;
    }

.box3 {
    background-color: #4AA0D8 ;
}

このコンテナ内にbox1/box2/box3の3つのコンテンツを均等な幅で配置したい場合のプロパティはどうなるでしょうか。

これまで見てきた中でも最も簡単です。

【css】

.box1 {
    background-color: #CCE3AD ;
}

.box2 {
    background-color: #7ACAD4 ;
    }

.box3 {
    background-color: #4AA0D8 ;
}
/* 以下のコードを追加*/
.box1, .box2, .box3{
flex: 1 1 0;
}

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

このように各コンテンツの幅が自動で均等に割り振られていることがわかります。

今回の例では幅900pxのコンテナに3つのboxを配置するので、1つのboxのベースサイズは300pxとすぐにわかります。

しかし、コンテナの幅やコンテンツの数によってはいちいち計算しなければならない可能性もでてきます。そんなときはこのcssの1行を思い出してください。

コーディングにかかる時間をぐっと短くできるはずです。

プロパティの短縮形

ちなみに今回使用した

flex: 1 1 0;

というプロパティは

flex: 1;

短縮して記述することもできます。

まとめ

ここまで読んで頂きありがとうございます。

今回はかなり細かい部分まで解説しましたが、実際にプロパティを設定する際に迷うことがあれば今回のブログを参照して頂けると嬉しいです。

ではプロパティの記述に関してのまとめです。

flexの記述 flexの記述(短縮形)
flex: 1 1 0; flex: 1;
flex: 0 0 auto; flex: none;
flex: 1 1 auto; flex: auto;
flex: 0 1 auto; flex: initial;
flex: 1 1 0; flex: 1;

Flexboxは最初はとっつきにくい印象があるかもしれませんが、レイアウトを整えたり、モバイルフレンドリーなページを作る際にとても便利なのでぜひ色々試してみてくださいね。

Flexbox超入門編はコチラ

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

HTML/CSSを動画で学ぼう

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

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

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
7月10日まで

募集 人数
100名 (残りわずか)
×