🧰業務効率化
CSS Flexboxレイアウト作成
並び方と揃え方を試してFlexbox CSSを生成
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
Flexboxの配置を実際に動かしながら確認し、コンテナとアイテムのCSS・HTMLを作成できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. よく使う配置を選ぶ
2. 並び方と揃え方を調整
3. プレビュー
4. CSSとHTMLをコピー
使い分けのポイント
justify-contentは並ぶ方向、align-itemsはそれと交差する方向の揃え方です。- 複数行の揃え方は、折り返しが有効で2行以上になった場合に作用します。
- 生成後は実際の文字量や画像サイズでも確認し、小さい画面で無理なく収まるか試してください。