CSS Flexbox ジェネレーター
ブラウザー内でローカル実行Flexbox レイアウトを視覚的に作成し、CSS・HTML・Tailwind をコピー
ライブプレビュー
主軸 → · 交差軸 ↓ · row / nowrap
斜線部分が gap の間隔です: 行の間隔 12px · 列の間隔 12px
ソース = HTML 内の位置。order = CSS の order で、見た目の配置だけを変えます。
3/24 · 最大 24 アイテム。
ガイドは軸、ソース位置、CSS の order、gap の間隔を示します。エクスポートには含まれません。
生成コード
.flex-container はコンテナーのルール、.flex-item-N は N 番目のアイテムのルールです。 選択中のアイテム: .flex-item-1
/* Sample box styles that match the preview */
.flex-container {
box-sizing: border-box;
padding: 12px;
border-width: 1px;
border-style: dashed;
border-color: #94a3b8;
border-radius: 8px;
}
.flex-item {
box-sizing: border-box;
margin: 0;
padding: 12px 16px;
border-width: 2px;
border-style: solid;
font-size: 14px;
line-height: 20px;
border-color: #6366f1;
border-radius: 6px;
background: #eef2ff;
color: #1e1b4b;
}
/* Flexbox layout */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
width: 100%;
height: 220px;
}
.flex-item.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
編集するとコードがリアルタイムで更新されます。
ブラウザー内でローカルに動作します。レイアウト設定はこのデバイスのブラウザーストレージに保存される場合があります。
CSS Flexbox ジェネレーター
Flexbox レイアウトを視覚的に作成し、本番用の CSS、HTML、Tailwind クラスをコピーできます。
使い方
プリセットを選ぶかコンテナーを調整します。アイテムをクリックまたはキーボードで選択して flex-grow、flex-shrink、flex-basis、order、align-self を編集します。アイテムを追加・削除・並べ替えし、CSS、HTML + CSS、Tailwind をコピーまたはダウンロードします。
視覚的な学習ガイド
ガイドは現在の方向と折り返しに応じて主軸と交差軸を描き、各アイテムにソース位置と CSS の order を表示し、アイテム間とライン間の gap を斜線で示します。
制限とプライバシー
最大 24 アイテム。長さは 0 以上の px、rem、em、%、vw、vh の値に対応し、calc() やカスタム CSS は使用できません。プレビューは横書き・左から右の書字方向を前提とします。すべてブラウザー内で処理され、設定はローカルストレージに保存される場合があります。
