CSS Flexbox プレイグラウンド

インタラクティブなプレイグラウンドでCSS Flexboxを学習します。プロパティを視覚的に調整し、即座に結果を確認し、生成されたCSSコードをコピーできます。開発者向けの無料オンラインツールです。

プリセット:

コンテナプロパティ

16px

アイテム

プレビュー

1 Item 1
2 Item 2
3 Item 3
4 Item 4
5 Item 5

生成されたCSS

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