これで分かる！CSS Flexboxの仕組みを詳しく解説

こんにちは、ゆうきです。

前回はCSS Flexboxのコンテナに使用できるアイテムプロパティについて徹底解説しました。

そこで今回はCSS Flexboxのアイテム単体で使用できるプロパティを解説していきます。

アイテムに使用できるプロパティ一覧

アイテム（子要素、f-item）に使用できるプロパティをご説明していきます。

アイテムに使用できるプロパティは下記の通りです。

order 

　　　　アイテムの並び順を指定

flex-grow

　　　　アイテムの伸び率を指定

flex-shrink

　　　　アイテムの縮み率を指定

flex-basis

　　　　アイテムのベースの幅を指定

flex

　　　　アイテムの伸び率、縮み率、ベースの幅を一括指定

align-self

　　　　アイテムの垂直方向の位置を指定

 並び順｜oder

アイテムの１つ１つにorderを指定すると、HTMLの記述順に関わらず要素の並び順を指定することできます。

orderでは次のように値を指定します。

orderのデフォルト値は0で、マイナスを含む数値を指定することができます。

伸び率｜flex-grow

flex-growはアイテムのサイズ（伸び率、大きさ）を指定するプロパティです。

flex-growでは、下記のように値を指定します。

flex-growのデフォルト値は0で、数値を指定することが可能です。しかし、マイナスの値は指定できません。

縮み率｜flex-shrink

flex-growとは逆で、アイテムの縮み率、小ささを指定するプロパティです。

flex-shrinkでは、下記のように値を指定します。

flex-shrinkのデフォルト値は0です。

ベースの幅｜flex-basis

flex-basisは、アイテムの基本幅を指定するプロパティです。

flex-basisでは、下記のように値を指定します。

flex-basisの初期値はautoです。

伸び率、縮み率、ベースの幅を一括指定｜flex

flexは、flex-grow、flex-shrink、flex-basisの３つの値をまとめて指定するプロパティです。

上記の３つのプロパティをそれぞれ指定するのではなく、flexを使ってまとめて指定する方法が推奨されています。

flexでは、下記のように値を指定します。

それぞれの値が影響して表示が変化するので、値を変えてみてどのような変化が生まれるのか慣れていくことで使い方を覚えられると思います。

垂直方向の位置｜align-self

align-selfは、アイテムの垂直方向の位置を指定するプロパティです。

コンテナに余白がなければ、どれを指定しても表示は変わりません。

つい使ってしまいがちなvertical-alignは使えないので間違えないようにしましょう。

align-contentでは、下記の値を指定することができます。

auto（デフォルト）

　　　　親要素のalign-itemsの値を使用

flex-start

　　　　アイテムを上揃えで配置

flex-end

　　　　アイテムを下揃えで配置

center

　　　　アイテムを中央揃えで配置

baseline

　　　　アイテムをベースラインに合わせて配置

stretch

　　　　アイテムを上下の余白を埋めるように配置

 

 

親要素でも、align-itemsを使って垂直方向の位置を指定することができますが、子要素にalign-selfが指定されていた場合はこちらが優先されます。

下記のように値を指定します。

flexboxを使う時の注意点

最後にFlexboxを使う時の注意点をご紹介しておきます。

vertical-alignは使えない

垂直方向の位置を指定するvertical-alignですが、Flexboxでは使用することができません。

 

すべてのアイテムに対して垂直方向の位置を指定する場合はFlexコンテナにalign-itemsを、個々のアイテム毎に垂直方向の位置を指定する場合はFlexアイテムにalign-selfプロパティを指定して設定するようにしましょう。

 

バージョンが古いブラウザだと動作しない可能性

現在では、主要なブラウザはすでにFlexboxに対応しており、基本的にベンダープレフィックスを付けなくても正常に動作させる事が可能です。

 

しかし、一部の古いバージョンのブラウザでは正しく表示されないため、それらのブラウザを推奨環境に含める場合はベンダープレフィックスが必要となります。

 

まとめ

これでFlexboxの解説は終わりです。

どうでしたでしょうか？

Flexboxは慣れるまで少し苦労するとはいえ、意外にそこまで難しくはないんです。

Flexboxを素早く使い慣れる最善の方法としては、

Step1　このFlexboxの記事を読んで理解する

Step2　僕が出したプロパティの例をまねて自分でコーディングしてみる

Step3　Flexboxを使って自分なりにコーディングする

 

です。

 

このStep通りに実践してみてください。

 

 

 

現在、プログラミング初心者の方限定でたった2週間でWebデザイナーになりたい方を募集しています。

＊ただし本気で取り組む方のみ

詳しくはこちらの記事をご覧ください。