こんにちは、簡単だと言われているフレックスボックスでつまずいているまゆえるです。
今回の記事では、なんでも忘れてしまうまゆえるがドットインストールで学習中の詳解CSS フレックスボックス編 (全16回) について、何回も動画を見返さなくて良くなるようにまとめた記事です！
こちらの記事は前回の続きになっていますので、ぜひ以下の記事も合わせてご覧ください。
初心者による初心者のためのフレックスボックス図解①【Flex Container編】
WebクリエイターボックスさんのFlexboxのチートシートは印刷もできて大変便利なのでぜひご覧ください。まゆえるも印刷して机に常備しています！
参考 日本語対応！CSS Flexboxのチートシートを作ったので配布しますWebクリエイターボックスフレックスボックスにおけるFlex Itemに付けられる6つのプロパティについて詳しく図解しています。
- align-self
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
目次
Flex Itemに付けられるプロパティは6種類
- align-self
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
Flex Itemには上記6種類のプロパティを付けることができます。
それぞれ使い方を図を使用してできるだけわかりやすく記載しておりますのでぜひご参考にしてください！
図解用にFlex ItemとFlex Containerを用意する
前回の記事と同じく、フレックスボックスを使用して横に並べた3つの正方形を用いて図解していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charaset="utf-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div><!-- /.container -->
</body>
</html>
containerクラスに「display : flex」というスタイルを付けて子要素である3つのdivを横並びにします。
3つのdivにはboxクラスを付けてwidthとheightは100pxを指定して正方形にします。
3つの正方形それぞれにクラスを付けて（box1、box2、box3）、backgroundに背景色（orange、skyblue、tomato）を付けてわかりやすくします。
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
}
.box1 {
background: orange;
}
.box2 {
background: skyblue;
}
.box3 {
background: tomato;
}
ブラウザで確認するとこのような感じです。
この場合は3つの正方形をFlex Item、
その親要素（containerクラスをつけたdiv）をFlex Containerと呼びます。
この3つの正方形を使って図解していくよ！
align-selfプロパティ
align-selfプロパティは、個々のFlex Itemの交差軸方向の揃えを指定するためのプロパティです。
- align-self : flex-start
- align-self : flex-end
- align-self : center
この3つの値を指定できるよ！
前回でも習ったけどalignがでてきたら「交差軸に対しての操作」になるんだったよね！
たとえば、上で用意したFlex Itemがこのような配置だったとします。
Flex Itemが上の画像のような配置だった場合に、box1クラスが付いているFlex Item（以降、box1と表記）だけを動かしたいとします。
このような場合に、交差軸方向に沿って個々のFlex Itemの位置を動かすことができるのがalign-selfプロパティです。この画像の場合は交差軸が上下方向に向いているので、box1を上下方向に動かすことができます。
box1に対してalign-selfプロパティをflex-startと指定すると、「start」とあるように交差軸の始点で位置を揃えることになります。
つまり、上記で説明したときの画像の配置の場合は上揃えになります。
交差軸の始点はこの画像の場合は上だね！box1の位置がわかりやすくなるように赤い枠で囲っているよ！
flex-endと指定すると、「end」とあるように交差軸の終点でbox1の位置を揃えることになります。つまり、下揃えになります。
centerと指定すると、交差軸の中央でbox1の位置を揃えることになります。つまり、中央揃えになります。
パターンがわかってきたね！
orderプロパティ
orderプロパティはFlex Itemの並び順の順番を指定するためのプロパティです。
初期値は「0」なので、たとえばbox2の正方形にだけ「order : 1」を指定すると、box2が一番最後に移動して以下の画像のような並び順になります。
また、今度はbox2に「order : -1」と指定すると一番前に並べられます。
個別に指定すると任意の並び順にすることができます。
orderは「注文」って意味は知っていたけど、「順序」って意味もあるのは知らなかった！
flex-basisプロパティ
flex-basisプロパティは、次に出てくるflex-growプロパティ、flex-shrinkプロパティと一緒に使用して、個々のアイテムをどれだけ伸ばしたり縮めたりするかを指定するために使用します。
flex-basisプロパティはFlex Itemのサイズを決めるためのプロパティです。flex-growプロパティ、flex-shrinkプロパティを使用するときの計算に使用します。
Flex Itemは主軸方向に伸び縮みするのため、主軸が横方向を向いている場合（flex-direction: row;）は、flex-basisはFlex Itemの幅を表します。
また、反対に主軸が縦方向を向いている（flex-direction: column;）場合は、flex-basisはFlex Itemの高さを表します。
この記事では主軸が横方向を向いているとして考えていきます。
flex-basisの初期値は「auto」です。Flex Itemに設定されているwidthの値がそのまま適用されます。
上のソースコードで用意した正方形の場合、box1のwithは100pxで設定しているのでflex-basisも100pxとなります。
widthが設定されていなければコンテンツの幅になります。
まゆえるは「コンテンツの幅ってなに？！」って思ったけど、widthを設定せずにflex-basisの初期値「auto」をブラウザで確認したらこんな感じだったよ！
任意の値を設定することもできるので、widthと異なる値を指定することもできます。
そのようにすると、フレックスボックス内では任意に設定した値の方が使用されます。
上のソースコードで用意したwidthが100pxの正方形であれば、flex-basisを200pxと指定するとフレックスボックス内では200pxの幅になります。
たとえflex-basisを200pxと指定したとしても、max-widthが150pxと指定されていたらFlex Itemの幅は150pxになるということです。
まゆえるはちょっと諦めたくなってきた…ちなみにbasisは「基礎」って意味なんだって！
flex-growプロパティ
さきほどのflex-basisプロパティは、flex-growプロパティとflex-shrinkプロパティと一緒に使用します。
flex-growプロパティは、主軸方向に余白がある場合に、それぞれのFlex Itemをどれだけ伸ばすか指定するプロパティです。
3つの正方形はwidthを100pxで設定しています。flex-basisの初期値は「auto」なので、何も指定しなければ3つの正方形のflex-basisも100pxです。
この例では、Flex Containerの幅が380pxだとします。flex-basisが100pxの正方形を3つ並べると右側に80pxの余白ができることになります。
この80pxの余白の部分を埋めたいときに、どのFlex Itemをどれだけ伸ばすかをflex-growプロパティで指定することができます。
flex-growプロパティの初期値「0」です。余白があっても伸ばさないという指定になります。そのため、何も指定しなければ余白は80pxのまま表示されます。
flex-growプロパティを、box1から順に1、1、2と設定してみます。そうすると、余白部分の80pxを1：1：2の割合で分配する、という指定になります。
80pxの余白を1：1：2で分配する計算をすると、20px：20px：40pxとなります。
3つの正方形のflex-basisは100pxなので、それぞれに余白を分配して足すと、上の図のようにbox1とbox2は120px、box3は140pxに伸びます。
上の図はなんとなくで伸ばしちゃったのでbox3だけ異様に長いね…
flex-growプロパティを使用する場面で、どれかひとつのFlex Itemに余白部分を割り当てたいということがよくあります。
その場合は、伸ばしたいひとつのFlex Itemにだけflex-growを「1」と指定します。
すると、余白部分を1：0：0の割合で分配することになります。
3つの正方形を使った例では、box1にだけflex-growを「1」と指定すると、box1に余白の80pxがすべて割り当てられて180pxになります。
growは「成長する」って意味だから伸びるイメージがあるね！
flex-shrinkプロパティ
flex-shrinkプロパティは、flex-growプロパティとは反対に、Flex Containerの幅が足りないときに、どのFlex Itemをどれだけ縮めるかを指定するためのプロパティです。
shrinkは「縮める」という意味で「シュリンク」って発音するみたいだよ！
flex-basisが100pxの正方形を4つ用意し、Flex Containterの幅が320pxだった場合を想定して図解していきます。
4つの正方形を横並びにしたい場合、Flex Containerの幅が80px足りないことになります。
この4つの正方形の幅を、同じ幅ずつ縮めてFlex Containerの320pxの幅にぴったり収めたいとします。
flex-shrinkプロパティの初期値は「1」です。足りない80pxの分を、1：1：1：1の割合で4つの正方形の幅を縮めてちょうど収める指定になります。
80pxを4等分にすると20pxなので、flex-basisが100pxの4つの正方形からそれぞれ20pxずつ縮めていくことになります。
上の図のように、4つの正方形が80pxの幅に縮まることで320pxのFlex Containerにぴったり収まる計算になります。
個別に値を指定することで、縮めたいFlex Itemだけを縮めることも可能です。
たとえば、box1とbox2は縮めずにbox3とbox4だけを縮めたいとします。
flex-shrinkをbox1から順に0、0、1、1とします。足りない80pxの分を、0：0：1：1の割合で正方形を縮めてちょうど収める指定になります。
80pxを2等分にすると40pxなので、box3とbox4のflex-basis100pxから40pxずつ縮めることでぴったり収めます。
上の図のように、box1とbox2の幅はそのままの100px。
box3とbox4だけが60pxの幅に縮まることで320pxのFlex Containerにぴったり収まる計算になります。
flex-shrinkプロパティを「0」と指定したFlex Itemは縮まないんだね！
flexプロパティ
flexプロパティは一括指定ができるプロパティです。
先程のflex-basisプロパティ、flex-growプロパティ、flex-shrinkプロパティの3つを同時に指定することができます。
また、キーワードも用意されています。
- flex : 1 1 100px（例）
- flex : initial
- flex : auto
- flex : none
flexプロパティはこんな感じで指定できるよ！
flexプロパティは、flex-grow、flex-shrink、flex-basisの順番で一括指定することができます。
たとえば、「flex : 1 1 100px」という順番で指定したとします。
上の図にあるように、「flex-grow : 1」「flex-shrink : 1」「flex-basis : 100px」を指定したことと同じ意味になります。
flexプロパティにはいくつかキーワードが用意されています。
「flex : initial」と指定すると、それぞれ3つのプロパティの初期値が設定されます。
上の図にあるように、3つのプロパティの初期値である「flex-grow : 0」「flex-shrink : 1」「flex-basis : auto」を指定したことと同じ意味になります。
Flex Containerの領域が余ってもFlex Itemを伸ばさない、でも領域が足りなくなったらFlex Itemを縮めるという設定になります。
initialは「初期」という意味もあるんだね…
「flex : auto」と指定すると、Flex Containerの領域が余ったらFlex Itemを伸ばしてぴったり埋める・足りなくなったらFlex Itemを縮めるという設定になります。
「flex-grow : 1」「flex-shrink : 1」「flex-basis : auto」を指定したときと同じ意味です。
上の図では、box1に「flex : auto」を指定することで、Flex Containerの領域に余白ができたらbox1を伸ばして余白を埋める設定になります。
反対に、上の図のようにFlex Containerの領域が足りなくなったらbox1を縮めてぴったり収める設定になります。
Google翻訳でautoを変換したら「オート」だって…「自動的」って意味かな？！
「flex : none」と指定すると、Flex Containerの領域が余っても伸ばさない・足りなくなっても縮めないという設定になります。
「flex-grow : 0」「flex-shrink : 0」「flex-basis : auto」を指定したときと同じ意味です。
flexプロパティに個別の値を指定する場合に、省略して1つか2つの値だけでも指定することができます。
flexプロパティに1つだけ単位のない整数を指定すると、flex-growの値を指定したことになります。
この場合、flex-shrinkは初期値の「1」になるのですが、flex-basisは初期値の「auto」ではなく「0%」になります。
上の図では、「flex : 1」と指定しています。これは「flex-grow : 1」「flex-shrink : 1」「flex-basis : 0%」と指定した場合と同じ意味です。
「0%」？！ちきんと理解しようとするといやになっちゃいそうだから、なんとな〜くでいいよね…
先程のflex-growの説明に一度戻ってみます。
flex-basisが100pxの正方形（Flex Item）が3つある場合に、Flex Containerの幅が380pxだったとします。
すると、80pxの余白ができます。
上の図の80pxの余白を埋めるためにFlex Itemを伸ばす指定をするとします。box1に「flex-grow : 1」、box2に「flex-grow : 1」、box3に「flex-grow : 2」と指定します。
この指定は80pxの余白を1：1：2の割合で分配してFlex Itemを伸ばす設定になります。
上の図のようにbox1とbox2は120px、box3は140pxになります。
しかし、少し複雑なためパッと見て結果がわかりにくいです。
それよりもbox1から順に1、1、2と指定するとFlex Containerの380pxの幅を1：1：2の割合で分割した幅になっていた方が直感的に理解しやすいです。
このように設定したい場合、他にもいくつか方法がありますが、すべてのFlex Itemのflex-basisを「0%」と指定して余白を380pxということにすることで設定できます。
余白が380pxになったことで、この380pxの余白を1：1：2の割合で分割する計算になります。380pxを1：1：2の割合で分割すると、95px：95px：190pxになります。
このような理由で、「flex : 1」と指定してflex-growだけを指定した場合、flex-basisiには0%が指定されて直感的にわかりやすいようきれいに分配されるようになっています。
ここまでたくさんの事例を見てきたけど、大抵の場合に余白があったら伸ばしておいてねという意味でひとつのFlex Itemにだけ「flex : 1」を指定することがほとんどなんだって…
さいごに
まゆえるのドットインストールは亀のような進み具合ですが、少しずつでも噛み砕いて理解していければ挫折は回避できると考えています。
習ったばかりのフレックスボックスを忘れないうちに実践するのも記憶に定着して良いですよね！
ドットインストールでは詳解CSS レスポンシブウェブデザイン編 (全8回)などの実践的なレッスンもあるので、フレックスボックスを理解したらぜひ実際に使って自分のモノにしちゃいましょう！
とか言いつつ、まゆえるまだやってないのでこれからやります…
ここまで読んでくださりありがとうございました！
初心者による初心者のためのフレックスボックス図解①【Flex Container編】
