Flexboxビジュアライザー
プロパティを変えてレイアウトの変化をリアルタイムで確認しよう
flex-direction
justify-content
align-items
flex-wrap
gap
8px
1
2
3
4
5
アイテム数:アイテム数: 5
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}使い方
- 左（スマホは下）のコントロールパネルで プロパティの値をクリック して選ぼう。
- 右（スマホは上）の プレビューエリア にアイテムのレイアウト変化がすぐ反映されるよ。
- 気に入ったレイアウトができたら 「📋 CSSをコピー」 ボタンでコードをコピーして自分のプロジェクトに貼り付けよう！