【HTML＆CSS】flexを簡単に試せるツールの使い方

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

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

ツールはこちら

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

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

flexに関わるCSSのプロパティに関して、詳しく触れながら使い方を説明しているページはこちら

用語の説明

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

flexアイテムの追加／削除

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

追加

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

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

削除

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

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

「flexコンテナ」の設定

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

試せる項目は下記のとおりです。class（クラス名）とdisplay以外のデフォルトの値は何も指定していないという意味ですので、デフォルトの値はブラウザに依存する場合があります。

class(クラス名)

任意のクラス名を設定できます。デフォルトは「fb-parent」です。

display

「flex」「block」「inline-flex」を選択でき、デフォルトは「flex」です。

height

「auto」と「1500px」を選べます。デフォルトは「auto」です。
flexコンテナの「align-items」やflexアイテムの「align-self」を試す際にflexコンテナに高さがある方が変化が見えるため用意しています。

flex-direction

「flex-direction」は flexコンテナ内でflexアイテムをどのように配置するかを設定します。
「row」「 row-reverse」「column」「column-reverse」を選択でき、デフォルトは「row」です。

flex-wrap

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

justify-content

「justify-content」は、flexコンテナの横並び上のアイテムの並べる間隔などの配置する方法を定義します。
「flex-start」「flex-end」「center」「space-between」「space-around」を選択でき、デフォルトは「flex-start」です。

align-items

「align-items」は、すべてのflexアイテムに集合として「align-self」の値を設定します。つまり、flexアイテムに「align-self」の設定がなければ、「align-items」の値が適応されます。「align-items」は、垂直方向のアイテムの配置を制御します。
「normal」「stretch」「flex-start」「flex-end」「center」「baseline」が選択でき、デフォルトは「normal」です。

align-content

「align-content」は、flexコンテナの縦並び（垂直）上のアイテムの並べる間隔などの配置する方法を定義します。
「stretch」「flex-start」「flex-end」「center」「space-between」「space-around」が選択でき、デフォルトは「stretch」です。

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

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

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

「flexアイテム」の設定

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

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

試せる項目は下記のとおりです。class（クラス名）とテキスト以外のデフォルトの値は何も指定していないという意味ですので、デフォルトの値はブラウザに依存する場合があります。

class(クラス名)

任意のクラス名を設定できます。
クラス名が設定されていない場合は、●番目の要素という疑似クラス（:nth-child(n)）を使ってスタイルを設定します。

order

「order」は、flexコンテナの中で、flexアイテムを並べる順序を設定します。flexコンテナ内のflexアイテムは order の値の昇順に配置され、それ以外はソース内の順序で配置されます。
正数・負数どちらの値も設定できます（-1、1、2など）。デフォルトは「0」です。

flex-grow

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

flex-shrink

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

flex-basis

「flex-basis」は、flexアイテムの長さを設定します。 「flex-direction」が「row」「row-reverse」であれば幅、「column」「column-reverse」であれば高さの設定になります。
0以上の数と単位（「px」「%」「em」「rem」）を設定できます。

align-selft

「align-self」は、flexコンテナの「align-items」の値を上書きします。つまり、flexアイテムに「align-self」の設定がなければ、「align-items」の値が適応されます。
「auto」「stretch」「flex-start」「flex-end」「center」「baseline」を選択でき、デフォルトは「auto」です。

テキスト

各flexアイテム内に表示するテキストを設定することができます。

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

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

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

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

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

HTML、CSSのソースの取得

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

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

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

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

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

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

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

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

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

スポンサーリンク