CSS Flexboxのレイアウトコードを生成する方法

方向、配置、折り返し、間隔を指定して生成操作を行うと、Flexbox用のCSSスニペットを作成できます。値を省略した場合は既定値が使われ、間隔はpx付きで出力されます。

FlexboxのCSSを組み立てる前に

このツールは、Flexboxレイアウトに必要なCSSスニペットを設定値から生成します。横方向・縦方向の並び、主軸と交差軸の配置、折り返し、要素間の間隔を個別に指定できるため、レイアウトのたたき台を作りたい場面で使えます。生成されるのはレイアウトを画面に適用する機能ではなく、確認や編集に使えるCSSコードです。

設定してCSSを生成する手順

1. 用意された設定欄で、方向、主軸方向の配置、交差軸方向の配置、折り返し、間隔を指定します。方向にはrowやcolumnなど、間隔には数値を入力します。
2. 値を省略する場合は、方向にrow、主軸方向の配置にcenter、交差軸方向の配置にもcenter、折り返しにnowrap、間隔に10が使われます。
3. 生成操作に進むと、Flexbox用のCSSスニペットが作られます。結果にはdisplay: flexの指定と、方向、配置、折り返し、間隔に対応する宣言が含まれます。
4. 生成されたコードを確認し、必要なら値を変更して再生成します。間隔の数値は、出力CSSではpx付きの値になります。追加のキーワード設定を渡しても、生成されるCSSや報告される設定値は変わりません。

生成結果の読み方と注意点

出力された宣言を見れば、コンテナの表示方式、子要素の並ぶ方向、配置方法、折り返しの有無、間隔を確認できます。たとえば方向をcolumnにすると、その値が方向の宣言に反映されます。入力値は別の形式へ変換されずにCSSへ入るため、入力した値が意図したCSS値になっているかを確認してください。

このツールはCSSコードを生成しますが、生成したレイアウトの描画やページへの適用までは行いません。出力を実際のスタイルシートへ貼り付ける前に、対象の要素や周辺のCSSとの関係も確認してください。

使用例

カードを縦方向に中央配置し、カード間を16ピクセル空けるCSSスニペットを作成します。

カードを縦に並べたい場面で、方向にcolumn、主軸方向と交差軸方向の配置にcenter、折り返しにnowrap、間隔に16を指定して生成します。

生成結果にはdisplay: flexと、方向、主軸方向の配置、交差軸方向の配置、折り返し、gap: 16pxに対応するCSS宣言が含まれます。

制限事項

• 生成対象はFlexboxのCSSスニペットです。レイアウトの描画や、ページへの自動適用までは含まれません。

よくある間違い

• CSSで使えない値や入力のタイプミスを指定すると、入力値が別の値へ直されずに出力へ入ります。方向や配置などの値をCSSで利用できる形に見直してから、もう一度生成してください。

よくある質問

方向を省略するとどうなりますか？

方向を指定しない場合はrowが使われます。指定した方向の値は、生成されるCSSの方向に反映されます。

要素間の間隔はどのように出力されますか？

間隔を指定しない場合は10が使われます。数値を指定した場合も、生成されたCSSではpx付きの値として表されます。

追加の設定を渡すと結果は変わりますか？

追加のキーワード設定を渡しても、生成されるCSSや報告される設定値には影響しません。方向、配置、折り返し、間隔などの対応する設定を使ってください。