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

｜ 8983 PV ｜ 2021.08.19

favorite_border

【SkillhubAIリリース記念無料キャンペーン、限定100名】 Skillhubが生まれ変わりました！AIを使った最先端の学習環境を使って無料から学習できます。
» 今すぐキャンペーンをチェックする

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

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

ベースサイズをautoに指定した場合
autoを使った3大プロパティ
ベースサイズをwidthプロパティで指定してみよう
margin/padding/border
たった１行でコンテナ内を均等割にする方法
まとめ

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

【css】

.box1 {
    flex: 1 1 0;
}

と

.box1 {
    flex: 1;
}

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

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

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

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

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

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

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

基本のおさらい

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

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

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

【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に１行追加するだけで横並びへとかえることができるのが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に関しても基本的な考え方は同じなので、色々試してみてくださいね。

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

では最後はコンテナ内に配置する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;
}