design
無料
サインアップ不要
QR コード生成
Flexboxのプロパティを視覚的に設定し、生成されたCSSを即座に取得します。
ツールを読み込み中…
このツールについて
すべてのFlexboxコンテナプロパティ — flex-direction、flex-wrap、justify-content、align-items、align-content、gap — を調整し、5つのカラーボックスがリアルタイムで反応するライブプレビューを確認します。個々のボックスをクリックして、flex-grow、flex-shrink、flex-basis、align-self、orderを調整し、ワンクリックで完成したCSSをコピーできます。
使い方
- 1 ステップ1：左側のコンテナパネルを使用して方向、折り返し、配置プロパティを設定してください。
- 2 ステップ2：各プロパティを変更するとプレビューのカラーボックスがリアルタイムで更新されるのを確認してください。
- 3 ステップ3：個々のボックスをクリックして選択し、アイテムパネルで独自のflexプロパティを調整してください。
- 4 ステップ4：コンテナ、選択されたアイテム、またはすべてのアイテムの生成されたCSSをコピーしてください。