Flexboxビジュアライザー

プロパティを変えてレイアウトの変化をリアルタイムで確認しよう

flex-direction
justify-content
align-items
flex-wrap
gap
8px
アイテム数:アイテム数: 5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

使い方

  1. 左(スマホは下)のコントロールパネルで プロパティの値をクリック して選ぼう。
  2. 右(スマホは上)の プレビューエリア にアイテムのレイアウト変化がすぐ反映されるよ。
  3. 気に入ったレイアウトができたら 「📋 CSSをコピー」 ボタンでコードをコピーして自分のプロジェクトに貼り付けよう!

このツールと一緒に学ぼう

Flexboxをもっと深く知りたい

関連ツール

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ