Sphere
Stacking

注意

これらのツールは「vibe coding」で開発されています。
予期しない動作や不具合が発生する可能性があります十分ご注意ください。

Flexboxプレイグラウンド

Flexboxのプロパティを視覚的に学習できます。

プリセット

コンテナー設定

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 10px

アイテムをクリックして編集

プレビュー

1

2

3

生成されたCSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
}