開発者ツール

CSS Flexbox ジェネレーター

CSS Flexboxの配置プロパティ（direction、justify-content、align-items、flex-wrap、gap）を指定し、レイアウト用のCSSコードを生成するオンラインツールです。

ツールを実行

CSS Flexbox ジェネレーターは、Webサイト制作やUIデザインで頻繁に利用されるFlexboxレイアウトのCSSプロパティを素早く組み立てるオンラインツールです。主軸の方向を決める direction（row または column）、主軸方向の揃え位置を指定する justify（flex-start、flex-end、center、space-between、space-around、space-evenly）、交差軸方向の揃え位置を指定する align（flex-start、flex-end、center、stretch、baseline）、折り返し挙動を制御する wrap（nowrap、wrap、wrap-reverse）、さらに子要素同士の余白を設定する gap の数値を入力することで、即座にCSSコードを生成します。各項目を省略した場合は標準設定（direction: row、justify: center、align: center、wrap: nowrap、gap: 10px）が適用され、入力し忘れがあっても自動的に補完されます。プロパティの書き間違いを防ぎ、スタイルシートへの組み込みを効率化します。生成されたコードは display: flex を含む完全なCSSスニペットとして出力され、そのままコピーして使用できます。また、gap の値には自動的に px が付与されるため、単位の記入漏れを防げます。レイアウトの調整を素早く行いたいデザイナーや開発者に最適なツールです。

使い方

  1. レイアウトの主軸方向（行または列）を指定します。
  2. 主軸方向の揃え位置（中央揃え、均等配置など）を指定します。
  3. 交差軸方向の揃え位置（中央、上揃え、引き伸ばしなど）を指定します。
  4. 要素の折り返し設定および要素間の余白（gapの数値）を入力します。
  5. 出力欄に生成されたCSSコードを確認し、スタイルシートへコピーして利用します。

使用例

  • direction に「row」、justify に「space-between」、align に「center」、gap に「16」を指定して、ナビゲーションバー用の均等配置スタイルを生成します。
  • direction に「column」、justify に「center」、align に「stretch」、wrap に「wrap」を指定して、縦並びカードリスト用のスタイルを生成します。

よくある質問

入力値を指定しない場合、どのような値が適用されますか？

初期設定として、direction は row、justify は center、align は center、wrap は nowrap、gap は 10（10px）が適用されます。

余白（gap）の単位は何になりますか？

入力された数値の末尾に「px」が付与されてCSSコードに出力されます。

このツールでレイアウトのプレビュー表示は行われますか？

当ツールはCSSコードの生成を行うものであり、画面上でのビジュアルプレビューやレンダリングは行いません。

すべてのガイド
このツールを埋め込む

以下のコードを使って、SmartPlusLab のツールをウェブサイトに追加できます。