CSS Flexbox 플레이그라운드

Flexbox 속성을 대화형으로 학습하세요. justify-content, align-items, flex-direction 등을 실시간으로 실험해보세요.

Presets:

Container Properties

16px

Items

Preview

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

Generated CSS

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