Flexbox生成ツール

Flexboxレイアウトを視覚的に調整し、CSSコードを生成します。

使い方

•コンテナの方向を選択（行、列、行逆、列逆）
•折り返しプロパティを選択（nowrap、wrap、wrap-reverse）
•justify-contentプロパティを調整（flex-start、center、space-betweenなど）
•align-itemsプロパティを調整（stretch、center、flex-startなど）
•CSSコードが自動的にプレビュー領域に生成されます
•「コピー」をクリックしてCSSコードをクリップボードにコピー

方向 (flex-direction)

コンテンツを配置

アイテムを配置

フレックス折り返し

ギャップ: 10px

アイテム数: 3

Preview

1

2

3

CSSコード

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

よくある質問

関連ツール

CSSグラデーション生成ツール

線形および放射状のCSSグラデーションを視覚的に生成します。

CSSボックスシャドウ生成ツール

視覚的にCSSボックスシャドウコードを生成します。

カラー変換ツール

HEX、RGB、HSL、HSVカラーフォーマットを相互に変換します。

フィードバック

フィードバック

お名前

CAPTCHA *