🎨

CSS Flexbox Playground

css · flexbox · layout

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 8px

아이템 수: 6

CSS

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

사용 방법

1
flex 속성들을 조절하세요.
2
미리보기에서 정렬을 확인하세요.
3
생성된 CSS를 복사하세요.

FAQ

이 도구는 무료인가요?

네, 가입 없이, 설치 할 필요도 없이 완전 무료로 바로 사용할 수 있습니다.

이 도구는 어떤 도구인가요?

CSS Flexbox 속성을 시각적으로 실험합니다. 방향, 줄바꿈, 정렬 등을 실시간으로 조정하고 생성된 CSS를 복사하세요. 회원가입이나 설치 없이, 페이지만 열면 바로 무료로 사용할 수 있어요.