開発者向け

Flexboxジェネレーター

ライブプレビューでCSS Flexboxレイアウトを視覚的にデザインし、すぐに使えるコードを生成。

プリセット

コンテナ

方向

折り返し

主軸配置

交差軸配置

コンテンツ配置

ギャップ個別ギャップ

ギャップ8px

プレビュー

アイテムをクリックして選択

アイテム数

幅600px

高さ300px

子要素 (3/10)

子要素 1

順序

伸長

縮小

基準サイズ

自己配置

子要素 2

順序

伸長

縮小

基準サイズ

自己配置

子要素 3

順序

伸長

縮小

基準サイズ

自己配置

コンテナ CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

CSS出力

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

Tailwind

flex gap-2

Flexboxジェネレーターについて

Flexboxジェネレーターはライブプレビュー付きでCSS Flexboxレイアウトを視覚的に構築するための無料オンラインツールです。方向、折り返し、配置、gapなどのコンテナプロパティを設定し、個別のflexプロパティを持つ子アイテムを追加して、生成されたCSSコードを即座にコピーできます。Flexboxの学習やレイアウトの素早いプロトタイピングに最適です。

すべての開発者向けツールを見る

使い方

コンテナプロパティ（flex方向、折り返し、justify content、配置）を設定します。子アイテムを追加し、オプションで個別のflexプロパティ（grow、shrink、basis、order）をカスタマイズします。ライブプレビューがリアルタイムで更新されます。一般的なパターン用のプリセットレイアウトを試してください。CSS出力をコピーしてプロジェクトで使用できます。

一般的な使用例

視覚的な実験によるCSS Flexboxプロパティの学習
コーディング前のページレイアウトの素早いプロトタイピング
レスポンシブなナビゲーションバーレイアウトの作成
一貫したスペーシングのカードグリッドレイアウトのデザイン
本番環境対応のFlexbox CSSコードの生成

Flexboxジェネレーターの使い方息抜きに無料のブラウザゲームをプレイしましょう

レビュー

ツールのレビューを読む・書く→

このツールについて話し合う→