Toolypet
Tools
Blog
언어 변경
테마 토글
CSS 도구
/
플렉스박스 플레이그라운드
플렉스박스 플레이그라운드
인터랙티브 컨트롤로 CSS Flexbox 반응형 레이아웃 구축
미리보기
재설정
항목 추가
1
2
3
컨테이너 속성
플렉스 방향
row
row-reverse
column
column-reverse
플렉스 줄바꿈
nowrap
wrap
wrap-reverse
콘텐츠 정렬
flex-start
flex-end
center
space-between
space-around
space-evenly
항목 정렬
flex-start
flex-end
center
stretch
baseline
콘텐츠 정렬
flex-start
flex-end
center
stretch
space-between
space-around
간격
10px
프리셋
기본 행
모두 중앙
사이 간격
주변 간격
균등 간격
열 레이아웃
역순 행
역순 열
항목 줄바꿈
항목
Item 1
플렉스 확장
플렉스 축소
자체 정렬
auto
flex-start
flex-end
center
stretch
baseline
순서
Item 2
플렉스 확장
플렉스 축소
자체 정렬
auto
flex-start
flex-end
center
stretch
baseline
순서
Item 3
플렉스 확장
플렉스 축소
자체 정렬
auto
flex-start
flex-end
center
stretch
baseline
순서
CSS 코드
Loading...