↔️
無料CSSフレックスボックスジェネレーター
フレックス方向、ラップ、justify、align をライブアイテムで実験。CSSをコピー
読み込み後はオフラインでも動作
ビジュアルフレックスボックスプレイグラウンド。方向、ラップ、justify-content、align-items、ギャップを設定し、アイテム数を変更し、プレビュー内のアイテムをクリックしてflex-grow を付与。CSSはライブで更新され、コピーの準備完了。
プリセット
ヒント：プレビュー内のアイテムをクリックしてflex-grow: 1 を切り替えます。
ライブプレビュー
css
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🔒 すべてブラウザで実行されます。何もアップロードされません。
使い方
インタラクティブなflexboxプレイグラウンドです：flex-direction、wrap、justify-content、align-itemsを切り替えて、最大10個のライブ要素が即座に再配置される様子を確認できます。任意の要素をクリックしてflex-grow: 1を与え、どのように空間を占有するか確認できます。CSSはライブで更新され、そのままプロジェクトに貼り付けられます。
- 1コンテナを設定する方向、wrap、justify-content、align-items、gap。
- 2要素を追加する1から10個の番号付きflex要素。
- 3実験する要素をクリックしてflex-growを切り替え、効果を確認してください。
- 4CSSをコピーするコンテナ（と要素）のルールが、貼り付けられる状態で得られます。
すべてブラウザ内で動作します — 何もアップロードされません。