【HTML＆CSS】flexを簡単に試せるツールの使い方（各プロパティ説明付）

なるべく説明なしで使えるように作ったつもりですが、少しゴチャゴチャした感じになってしまいました。改良の余地が十分あるので、もっとシンプルに試せるツールに改良したものも作りたいと思います。

一先ずは、今回作成したツールの使い方を簡単に説明したいと思います。

スポンサーリンク

ツールはこちら

※どちらのリンクも別タブで開きます

ツールは下記になります。

flexに関わるCSSのプロパティに関しては簡単に触れ説明をメインにしたページはこちら

用語の説明

本ページでは、
青枠：親要素（「display: flex;」を指定する要素）のことをflexコンテナと呼び、
赤枠：子要素（「display: flex;」が指定された要素の直接の子要素）のことをflexアイテムと呼ぶことにします。

flexアイテムの追加／削除

最初に4つflexアイテムを入れています。さらに「flexアイテム」を追加することもできますし、削除することもできます。

追加

青丸の「要素を追加」をクリックすると、一番後ろに「flexアイテム」を追加します。
※上画像の場合、黄色要素の後ろに追加

赤丸の「要素追加」をクリックすると、指定の箇所（▼が指すところ）に「flexアイテム」を追加します。

削除

「×」をクリックします。

「OK」をクリックするとその「flexアイテム」を削除します。

「flexコンテナ」の設定

画面左側で「flexコンテナ」に対してflexに関わるスタイルを簡単に試すことができます。

class(クラス名) 

デフォルトで「fb-parent」というクラス名を付けていますが、任意のクラス名に変更することができます。

後述しますが、試したflex要素のhtml、cssを取得できるようにしていますので、実際に利用したいクラス名に変更してご利用ください。

display

デフォルトでdisplayを「flex」を設定しています。

flex以外に「block」「inline-flex」を用意しています。「block」でflexを解除したり、インラインのflexの場合にどうなるか試すことができます。

height

高さは特に指定していませんが、「1500px」に変更することができます。

後ほど説明する「flexコンテナ」の「align-items」や「flexアイテム」の「align-self」を試す際に、「flexコンテナ」に高さがないと変化が見えなかったりするので、そのために設定できるようにしています。

「align-items」「align-self」を試す際にご活用ください。

flex-direction

「flex-direction」は flexコンテナ内でflexアイテムをどのように配置するかを設定します。「flex-direction」は特に指定していないので、デフォルトの「row」が適応されている状態です。

「flex-direction」はhtmlの「dir」属性に依存します。dirが設定なし、もしくは「ltr」であれば左から右へ、「rtl」であれば右から左です。「ltr」はleft to right（左から右）、「rtl」はright to left（右から左）です。何の略か分かれば分かりやすいですね。

ただ、dir属性は設定されることはほとんどないので、htmlのdir属性が「設定なし」「ltr」の方だけを覚えておけば十分だと思います。ツールもdir属性の設定はなしです。

htmlのdir属性が「設定なし」「ltr」の場合

row

横並びで左から右に配置される

row-reverse

横並びで右から左に配置される

column

縦に積んで上から下に配置される

column-reverse

縦に積んで下から上に配置される

htmlのdir属性が「rtl」の場合※覚える必要はありません

row、row-reverseが「設定なし」「ltr」の反対になります。

row

横並びで右から左に配置される

row-reverse

横並びで左から右に配置される

column

縦に積んで上から下に配置される

column-reverse

縦に積んで下から上に配置される

 

flex-wrap

「flex-wrap」は、flexアイテムを一行に詰め込むか、複数行に折り返してもよいかを指定します。また、折り返しを許可する場合は、積み重ねる方向も指定できます。「flex-wrap」は特に指定していないので、デフォルトの「nowrap」が適応されている状態です。

nowrap

折り返さず詰め込んで一行に並べる

wrap

flexコンテナからはみ出るflexアイテムは、折り返して次の行に並べる。並び順は上から下

wrap-reverse

flexコンテナからはみ出るflexアイテムは、折り返して次の行に並べる。並び順は下から上

 

justify-content

「justify-content」は、flexコンテナの横並び上のアイテムの並べる間隔などの配置する方法を定義します。「justify-content」は特に指定していないので、デフォルトの「flex-start」が適応されている状態です。※環境によってはデフォルトは異なる設定になる場合があります

flex-start

flexアイテムをflexコンテナの先頭位置に寄せる（通常は左に寄せる）

flex-end

flexアイテムをflexコンテナの末尾位置に寄せる（通常は右に寄せる）

center

flexアイテムをflexコンテナの中央に寄せる

space-between

flexアイテムは、flexコンテナの中で均等に配置される。隣接するflexアイテム同士の間隔は同じになり、最初のflexアイテムはflexコンテナの先頭位置に寄せられ、最後のflexアイテムは末尾位置に寄せられる

space-around

flexアイテムは、flexコンテナの中で均等に配置される。隣接するflexアイテム同士の間隔は同じになり、最初のflexアイテムの前と最後のflexアイテムの後ろの間隔はアイテム同士の間隔の半分になる

 

align-items

「align-items」は、すべてのflexアイテムに集合として「align-self」の値を設定します。つまり、flexアイテムに「align-self」の設定がなければ、「align-items」の値が適応されます。

「align-items」は、垂直方向のアイテムの配置を制御します。デフォルトの「normal」が適応されている状態です。

normal

現在のレイアウトモードに依存する（通常は「stretch」と同じ）

stretch

flexコンテナまたは1番高さがあるflexアイテムに合わせて拡張される

flex-start

flexアイテムをflexコンテナの先頭位置に寄せる（通常は上に寄せる）
※折り返し可で複数行ある場合、垂直方向の間隔は同じ、上側には隙間はありません

flex-end

flexアイテムをflexコンテナの末尾位置に寄せる（通常は下に寄せる）
※折り返し可で複数行ある場合、垂直方向の間隔は同じ、下側には隙間はありません

center

flexアイテムをflexコンテナの垂直方向の中央に寄せる
※折り返し可で複数行ある場合、垂直方向の間隔は同じ、一番上と一番下の間隔はアイテム間の半分の間隔

baseline

ベースラインで揃える（通常は「flex-start」と同じ）

 

align-content

「align-content」は、flexコンテナの縦並び（垂直）上のアイテムの並べる間隔などの配置する方法を定義します。「align-content」は特に指定していないので、デフォルトの「stretch」が適応されている状態です。※環境によってはデフォルトは異なる設定になる場合があります

また、「flex-wrap」が「wrap」か「wrap-reverse」である必要があります。下記は「wrap」が設定されている場合の動きです。「wrap-reverse」の場合は反対になります。

stretch

flexコンテナまたは1番高さがあるflexアイテムに合わせて拡張される

flex-start

flexアイテムをflexコンテナの先頭位置に寄せる（通常は上に寄せる）

flex-end

flexアイテムをflexコンテナの末尾位置に寄せる（通常は下に寄せる）

center

flexアイテムをflexコンテナの垂直方向の中央に寄せる

space-between

flexアイテムは、flexコンテナの中で均等に配置される。隣接するflexアイテム同士の間隔は同じになり、最初のflexアイテムはflexコンテナの先頭位置に寄せられ、最後のflexアイテムは末尾位置に寄せられる

space-around

flexアイテムは、flexコンテナーの中で均等に配置される。隣接するflexアイテム同士の間隔は同じになり、最初のflexアイテムの前と最後のflexアイテムの後ろの間隔はアイテム同士の間隔の半分になる

 

「flexコンテナ」の設定を閉じる（開く）

設定の右上にある「＜」をクリックすると、閉じることができます。閉じるとflexコンテナの幅が広くなるので確認しやすくなります。

閉じると上のような状態になります。「＞」をクリックすると再び開きます。

「flexアイテム」の設定

画面右側の各「flexアイテム」の設定で自分自身へのflexに関わるスタイルを簡単に試すことができます。

少し透明な白背景の部分が設定スペースです。

class(クラス名) 

デフォルトではクラス名は付けていません。任意のクラス名を設定することができます。

クラス設定していない場合は下記のように●番目の要素という疑似クラス（:nth-child(n)）を使ってスタイルを設定します。

.fb-parent > :nth-child(1) {
    /*1番目のflexアイテム */
}

後述しますが、試したflex要素のhtml、cssを取得できるようにしていますので、実際に利用したいクラス名に変更してご利用ください。

order

「order」は、flexコンテナの中で、flexアイテムを並べる順序を設定します。flexコンテナ内のflexアイテムは order の値の昇順に配置され、それ以外はソース内の順序で配置されます。

「order」は特に指定していないので、デフォルトの「0」が適応されている状態です。

「order」はマイナスの値も設定できるので、1番目にしたい場合は「order: -1;」、一番最後にしたい場合も「order: 9999;」と自由が効く設計になっています。

flex-grow

「flex-grow」は、flexアイテムの横もしくは縦方向にどれくらい伸ばすかを設定します。「flex-direction」が「row」「row-reverse」であれば横方向、「column」「column-reverse」であれば縦方向に伸ばします。

「flex-grow」は特に指定していないので、デフォルトの「0」が適応されている状態です。設定できる値は0以上です。

flex-growの伸ばし方（簡易的な説明）

「flex-grow」に1以上を設定しているflexアイテムがある場合、flexコンテナの余っている部分（上画像の青枠）を設定されている値を元に分割してflexアイテムの幅（高さ）を大きくします。
※初期値が「0」なのでどれも大きくならないわけですね

どのように増やすか？例を用いて説明します。読み飛ばしても特に問題はありません。

余白の分割方法

下記（例）の場合だと、上記のような分割になります。画像でイメージしてから下記をご覧ください。

（例）「flex-grow」が1、2、3、4と設定されていて、余白が1000pxの場合
1000pxを1：2：3：4で分割して各flexアイテムに割り振られた分、拡大します。

計算式で書くと下記のようになります。
1000px÷（1＋2＋3＋4）＝100px
「flex-grow=1」には100px×1=100px
「flex-grow=2」には100px×2=200px
「flex-grow=3」には100px×3=300px
「flex-grow=4」には100px×4=400px

各flexアイテムの幅（高さ）に100px、200px、300px、400pxが割り当てられ、幅（高さ）がその分増えます。

flex-shrink

「flex-shrink」は、flexアイテムの横もしくは縦方向にどれくらい縮めるかを設定します。すべてのflexアイテムがflexコンテナよりも大きい場合、flexアイテムは「flex-shrink」の数値に従って縮小して収まります。

「flex-shrink」は特に指定していないので、デフォルトの「1」が適応されている状態です。ちなみに、設定できる値は1以上です。

どのように縮小するか？例を用いて説明します。読み飛ばしても特に問題はありません。

縮小方法

下記（例）の場合だと、上記のように各flexアイテムが縮小されます。画像でイメージしてから下記をご覧ください。

（例）「flex-shrink」が1、2、3、4と設定されていて、縮小する必要がある寸法が1000pxの場合
1000pxを1：2：3：4で分割して各flexアイテムに割り振られた分、縮小します。

計算式で書くと下記のようになります。
1000px÷（1＋2＋3＋4）＝100px
「flex-shrink=1」には100px×1=100px
「flex-shrink=2」には100px×2=200px
「flex-shrink=3」には100px×3=300px
「flex-shrink=4」には100px×4=400px

各flexアイテムの幅（高さ）に100px、200px、300px、400pxが割り振られ、幅（高さ）がその分減ります。

参考：設定がない場合（すべてflex-shrinkが1の場合）

設定がなくflexアイテムすべてがflex-shrinkが1であれば、下記のような 1：1：1：1 なので、「縮小する必要がある寸法」を４で割ってそれぞれ縮小します。

 

flex-basis

「flex-basis」は、flexアイテムの長さを設定します。 「flex-direction」が「row」「row-reverse」であれば幅、「column」「column-reverse」であれば高さの設定になります。

指定した長さがflexコンテナに収まらない場合は、「flex-shrink」に倣って縮小されるため、指定した長さより短くなります。必ずしも設定した長さにならないことに注意が必要です。

align-self

「align-self」は、flexコンテナの「align-items」の値を上書きします。つまり、flexアイテムに「align-self」の設定がなければ、「align-items」の値が適応されます。

「align-self」は、垂直方向のアイテムの配置を制御します。デフォルトの「auto」が適応されている状態です。

auto

flexコンテナの「align-item」の値に合わせる

stretch

flexコンテナまたは1番高さがあるflexアイテムに合わせて拡張される

flex-start

flexアイテムをflexコンテナの先頭位置に寄せる（通常は上に寄せる）

flex-end

flexアイテムをflexコンテナの末尾位置に寄せる（通常は下に寄せる）

center

flexアイテムをflexコンテナの垂直方向の中央に寄せる

baseline

ベースラインで揃える（通常は「flex-start」と同じ）

 

テキスト

各flexアイテムの幅が異なる場合どのようなレイアウトになるか検証するためにflexアイテムの中のテキストを変更できるようにしています。

また、後述しますが、試したflex要素のhtml、cssを取得できるようにしていますので、実際に利用したいテキストに変更してご利用ください。

 

 

flexアイテムごとの設定を閉じる（開く）

flexアイテムごとの設定は「要素ごとに設定する」で表示したり、隠したりすることができます。隠すとflexアイテムに余計なものが表示されていない状態になるので、確認しやすくなります。

「隠す」をチェックした状態にすると、設定項目が非表示となり、「テキスト」で指定した文字列だけの表示となります。

「表示」にすると各flexアイテムの設定を行えるようになります。

表示／隠すを切り替えながら色々試してみてください。

HTML、CSSのソースの取得

flexコンテナやflexアイテムにいろいろと設定をした結果のhtml、cssのソースをコピーできるようにしています。

少しスクロールするとソースがありますので、必要な方はコピーしてご利用ください。

html、css、html＋cssのソースを取得できます。

「css」のソースにはstyleタグはなく、「全て」のソースにはstyleタグで囲っています。ですので、コピペしてそのまま利用しやすいようにしています。

貼り付けたい箇所に合わせて各ソースをコピーしてご利用ください。

何かご要望等あれば、お気軽にコメントください！

ツールに関してご要望やバグなど何でも気になることがありましたら、コメントいただけると嬉しいですm(__)m

ツールは下記になります。※別タブで開きます

以上、flexの勉強などにお役に立てれば幸いです。

スポンサーリンク