初心者による初心者のためのフレックスボックス図解②【Flex Item編】

初心者による初心者のためのフレックスボックス図解2

まゆえる
まゆえる

こんにちは、簡単だと言われているフレックスボックスでつまずいているまゆえるです。

今回の記事では、なんでも忘れてしまうまゆえるがドットインストールで学習中の詳解CSS フレックスボックス編 (全16回) について、何回も動画を見返さなくて良くなるようにまとめた記事です!

こちらの記事は前回の続きになっていますので、ぜひ以下の記事も合わせてご覧ください。

初心者による初心者のためのフレックスボックス図解1初心者による初心者のためのフレックスボックス図解①【Flex Container編】

WebクリエイターボックスさんのFlexboxのチートシートは印刷もできて大変便利なのでぜひご覧ください。まゆえるも印刷して机に常備しています!

参考 日本語対応!CSS Flexboxのチートシートを作ったので配布しますWebクリエイターボックス
この記事の内容

フレックスボックスにおけるFlex Itemに付けられる6つのプロパティについて詳しく図解しています。

  • align-self
  • order
  • flex-basis
  • flex-grow
  • flex-shrink
  • flex

Flex Itemに付けられるプロパティは6種類

  1. align-self
  2. order
  3. flex-basis
  4. flex-grow
  5. flex-shrink
  6. 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つの正方形が横並びになってブラウザに表示されている画像

この場合は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がこのような配置だったとします。

3つの正方形が横並びになってブラウザに表示されている画像

Flex Itemが上の画像のような配置だった場合に、box1クラスが付いているFlex Item(以降、box1と表記)だけを動かしたいとします。

横並びの3つの正方形の内、box1クラスを付けた一番左の正方形だけを移動させたい場合

このような場合に、交差軸方向に沿って個々のFlex Itemの位置を動かすことができるのがalign-selfプロパティです。この画像の場合は交差軸が上下方向に向いているので、box1を上下方向に動かすことができます。

align-self : flex-start

box1に対してalign-selfプロパティをflex-startと指定すると、「start」とあるように交差軸の始点で位置を揃えることになります

つまり、上記で説明したときの画像の配置の場合は上揃えになります。

align-self : flex-startの図解

交差軸の始点はこの画像の場合はだね!box1の位置がわかりやすくなるように赤い枠で囲っているよ!

align-self : flex-end

flex-endと指定すると、「end」とあるように交差軸の終点でbox1の位置を揃えることになります。つまり、下揃えになります。

align-self : flex-endの図解

align-self : center

centerと指定すると、交差軸の中央でbox1の位置を揃えることになります。つまり、中央揃えになります。

align-self : centerの図解
まゆえる
まゆえる

パターンがわかってきたね!

orderプロパティ

orderプロパティはFlex Itemの並び順の順番を指定するためのプロパティです。

初期値は「0」なので、たとえばbox2の正方形にだけ「order : 1」を指定すると、box2が一番最後に移動して以下の画像のような並び順になります。

box2の正方形にだけ「order : 1」を指定した画像

また、今度はbox2に「order : -1」と指定すると一番前に並べられます。

box2の正方形にだけ「order : −1」を指定した画像

個別に指定すると任意の並び順にすることができます。

box1、box2、box3にそれぞれ個別に番号を指定して任意の並び順にした画像
まゆえる
まゆえる

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がrowの場合に、flex-basisが要素の幅を表している図解

また、反対に主軸が縦方向を向いている(flex-direction: column;)場合は、flex-basisはFlex Itemの高さを表します。

flex-directionがcolumnの場合に、flex-basisが要素の高さを表している図解

flex-basisの使い方

この記事では主軸が横方向を向いているとして考えていきます。

flex-basisの初期値は「auto」です。Flex Itemに設定されているwidthの値がそのまま適用されます。

上のソースコードで用意した正方形の場合、box1のwithは100pxで設定しているのでflex-basisも100pxとなります。

この記事ではflex-basisiはFlex Itemの幅を指していて、100pxであるという図解

widthが設定されていなければコンテンツの幅になります。

widthが設定されていなければコンテンツの幅になることをブラウザで確認した画像
まゆえる
まゆえる

まゆえるは「コンテンツの幅ってなに?!」って思ったけど、widthを設定せずにflex-basisの初期値「auto」をブラウザで確認したらこんな感じだったよ!

任意の値を設定することもできるので、widthと異なる値を指定することもできます。

そのようにすると、フレックスボックス内では任意に設定した値の方が使用されます。

上のソースコードで用意したwidthが100pxの正方形であれば、flex-basisを200pxと指定するとフレックスボックス内では200pxの幅になります。

flex-basisを200pxと指定するとフレックスボックス内では200pxの幅が適用される図解
注意
max-widthやmin-widthが設定されている場合はそちらが優先されます。

たとえflex-basisを200pxと指定したとしても、max-widthが150pxと指定されていたらFlex Itemの幅は150pxになるということです。

flex-basisが200pxでも、max-widthが150pxを指定されていたらFlex Itemの幅は150pxになるという図解
まゆえる
まゆえる

まゆえるはちょっと諦めたくなってきた…ちなみにbasisは「基礎」って意味なんだって!

flex-growプロパティ

さきほどのflex-basisプロパティは、flex-growプロパティとflex-shrinkプロパティと一緒に使用します。

flex-growプロパティは、主軸方向に余白がある場合に、それぞれのFlex Itemをどれだけ伸ばすか指定するプロパティです。

flex-growプロパティの使い方

3つの正方形はwidthを100pxで設定しています。flex-basisの初期値は「auto」なので、何も指定しなければ3つの正方形のflex-basisも100pxです。

この例では、Flex Containerの幅が380pxだとします。flex-basisが100pxの正方形を3つ並べると右側に80pxの余白ができることになります。

3つの正方形はwidthを100pxで設定しているので、flex-basisの初期値「auto」の場合に3つの正方形のflex-basisも100pxとなる図解

この80pxの余白の部分を埋めたいときに、どのFlex Itemをどれだけ伸ばすかをflex-growプロパティで指定することができます。

flex-growプロパティの初期値「0」です。余白があっても伸ばさないという指定になります。そのため、何も指定しなければ余白は80pxのまま表示されます。

flex-growプロパティの初期値「0」は余白があっても伸ばさないという図解

flex-growプロパティを、box1から順に1、1、2と設定してみます。そうすると、余白部分の80pxを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-growプロパティを使用する場面で、どれかひとつのFlex Itemに余白部分を割り当てたいということがよくあります。

その場合は、伸ばしたいひとつのFlex Itemにだけflex-growを「1」と指定します。

すると、余白部分を1:0:0の割合で分配することになります。

3つの正方形を使った例では、box1にだけflex-growを「1」と指定すると、box1に余白の80pxがすべて割り当てられて180pxになります。

box1にだけflex-growを「1」と指定すると、box1に余白の80pxが割り当てられて180pxになる図解
まゆえる
まゆえる

growは「成長する」って意味だから伸びるイメージがあるね!

flex-shrinkプロパティ

flex-shrinkプロパティは、flex-growプロパティとは反対に、Flex Containerの幅が足りないときに、どのFlex Itemをどれだけ縮めるかを指定するためのプロパティです。

まゆえる
まゆえる

shrinkは「縮める」という意味で「シュリンク」って発音するみたいだよ!

flex-shrinkプロパティの使い方

flex-basisが100pxの正方形を4つ用意し、Flex Containterの幅が320pxだった場合を想定して図解していきます。

4つの正方形を横並びにしたい場合、Flex Containerの幅が80px足りないことになります。

100pxの正方形を4つ用意し、Flex Containterの幅が320pxだった場合、80px足りないという図

この4つの正方形の幅を、同じ幅ずつ縮めてFlex Containerの320pxの幅にぴったり収めたいとします。

flex-shrinkプロパティの初期値は「1」です。足りない80pxの分を、1:1:1:1の割合で4つの正方形の幅を縮めてちょうど収める指定になります。

80pxを4等分にすると20pxなので、flex-basisが100pxの4つの正方形からそれぞれ20pxずつ縮めていくことになります。

100pxの正方形4つがそれぞれ20pxずつ縮まって320pxにぴったり収まっている図

上の図のように、4つの正方形が80pxの幅に縮まることで320pxのFlex Containerにぴったり収まる計算になります。

個々に縮めたいFlex Itemがある場合

個別に値を指定することで、縮めたい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ずつ縮めることでぴったり収めます。

flex-shrinkをbox1から順に0、0、1、1とすると、足りない80pxの分を
2等分にした40pxをbox3とbox4のflex-basis100pxから縮めることでぴったり収める図解

上の図のように、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プロパティはこんな感じで指定できるよ!

3つのプロパティの値を順番に入れて指定する方法

flexプロパティは、flex-grow、flex-shrink、flex-basisの順番で一括指定することができます。

たとえば、「flex : 1 1 100px」という順番で指定したとします。

flex : 1 1 100pxという順番で一括指定した図

上の図にあるように、「flex-grow : 1」「flex-shrink : 1」「flex-basis : 100px」を指定したことと同じ意味になります。

flex : initial

flexプロパティにはいくつかキーワードが用意されています。

「flex : initial」と指定すると、それぞれ3つのプロパティの初期値が設定されます。

Flex Containerの領域が余ってもFlex Itemを伸ばさない、でも領域が足りなくなったらFlex Itemを縮めるという設定の図

上の図にあるように、3つのプロパティの初期値である「flex-grow : 0」「flex-shrink : 1」「flex-basis : auto」を指定したことと同じ意味になります。

Flex Containerの領域が余ってもFlex Itemを伸ばさない、でも領域が足りなくなったらFlex Itemを縮めるという設定になります。

まゆえる
まゆえる

initialは「初期」という意味もあるんだね…

flex : auto

「flex : auto」と指定すると、Flex Containerの領域が余ったらFlex Itemを伸ばしてぴったり埋める・足りなくなったらFlex Itemを縮めるという設定になります。

「flex-grow : 1」「flex-shrink : 1」「flex-basis : auto」を指定したときと同じ意味です。

flex : autoを指定することで、Flex Containerの領域に余白ができたらbox1を伸ばして余白を埋める設定の図

上の図では、box1に「flex : auto」を指定することで、Flex Containerの領域に余白ができたらbox1を伸ばして余白を埋める設定になります。

Flex Containerの領域が足りなくなったらbox1を縮めてぴったり収める設定の図

反対に、上の図のようにFlex Containerの領域が足りなくなったらbox1を縮めてぴったり収める設定になります。

まゆえる
まゆえる

Google翻訳でautoを変換したら「オート」だって…「自動的」って意味かな?!

flex : none

「flex : none」と指定すると、Flex Containerの領域が余っても伸ばさない・足りなくなっても縮めないという設定になります。

「flex-grow : 0」「flex-shrink : 0」「flex-basis : auto」を指定したときと同じ意味です。

flex : noneと指定すると、Flex Containerの領域が余っても伸ばさない・足りなくなっても縮めないという設定になる図

flexプロパティは1つか2つの値だけ設定することもできる

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%」と指定した場合と同じ意味になるという図

上の図では、「flex : 1」と指定しています。これは「flex-grow : 1」「flex-shrink : 1」「flex-basis : 0%」と指定した場合と同じ意味です。

まゆえる
まゆえる

「0%」?!ちきんと理解しようとするといやになっちゃいそうだから、なんとな〜くでいいよね…

なぜflex-basisは初期値ではなく「0%」になるのか?

先程のflex-growの説明に一度戻ってみます。

flex-basisが100pxの正方形(Flex Item)が3つある場合に、Flex Containerの幅が380pxだったとします。

すると、80pxの余白ができます。

flex-basisが100pxの正方形が3つあり、Flex Containerの幅が380pxである図

上の図の80pxの余白を埋めるためにFlex Itemを伸ばす指定をするとします。box1に「flex-grow : 1」、box2に「flex-grow : 1」、box3に「flex-grow : 2」と指定します。

この指定は80pxの余白を1:1:2の割合で分配してFlex Itemを伸ばす設定になります。

80pxの余白を1:1:2の割合で分配してFlex Itemを伸ばす設定になっている図

上の図のようにbox1とbox2は120px、box3は140pxになります。

しかし、少し複雑なためパッと見て結果がわかりにくいです。

それよりもbox1から順に1、1、2と指定するとFlex Containerの380pxの幅を1:1:2の割合で分割した幅になっていた方が直感的に理解しやすいです。

box1から順に1、1、2と指定するとFlex Containerの380pxの幅を1:1:2の割合で分割した幅になっている図

このように設定したい場合、他にもいくつか方法がありますが、すべてのFlex Itemのflex-basisを「0%」と指定して余白を380pxということにすることで設定できます。

すべての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 : 1」と指定してflex-growだけを指定した場合、flex-basisiには0%が指定されて直感的にわかりやすいようきれいに分配されるようになっています。

まゆえる
まゆえる

ここまでたくさんの事例を見てきたけど、大抵の場合に余白があったら伸ばしておいてねという意味でひとつのFlex Itemにだけ「flex : 1」を指定することがほとんどなんだって…

余白があったら伸ばしておいてねという意味でひとつのFlex Itemにだけ「flex : 1」を指定している図

さいごに

まゆえるのドットインストールは亀のような進み具合ですが、少しずつでも噛み砕いて理解していければ挫折は回避できると考えています。

習ったばかりのフレックスボックスを忘れないうちに実践するのも記憶に定着して良いですよね!

ドットインストールでは詳解CSS レスポンシブウェブデザイン編 (全8回)などの実践的なレッスンもあるので、フレックスボックスを理解したらぜひ実際に使って自分のモノにしちゃいましょう!

まゆえる
まゆえる

とか言いつつ、まゆえるまだやってないのでこれからやります…

ここまで読んでくださりありがとうございました!

初心者による初心者のためのフレックスボックス図解1初心者による初心者のためのフレックスボックス図解①【Flex Container編】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です