🍋 CSS Tools
CSS Flexbox 생성기
CSS Flexbox 레이아웃을 시각적으로 생성
chars
words
sentences
lines
Flexbox Options
결과
결과
CSS Flexbox 생성기 소개
CSS Flexbox 레이아웃을 시각적으로 만들고 CSS 코드를 생성합니다. 정렬, 방향, 감싸기 등을 설정합니다.
작동 방식
컨테이너와 아이템의 Flexbox 속성을 시각적으로 설정하면 실시간 미리보기와 CSS 코드가 생성됩니다.
단계별 사용법
- 1 [
- 2 '
- 3 컨
- 4 테
- 5 이
- 6 너
- 7
- 8 속
- 9 성
- 10
- 11 설
- 12 정
- 13
- 14 (
- 15 방
- 16 향
- 17 ,
- 18
- 19 정
- 20 렬
- 21 ,
- 22
- 23 감
- 24 싸
- 25 기
- 26 )
- 27 '
- 28 ,
- 29
- 30 '
- 31 아
- 32 이
- 33 템
- 34
- 35 속
- 36 성
- 37
- 38 설
- 39 정
- 40
- 41 (
- 42 순
- 43 서
- 44 ,
- 45
- 46 성
- 47 장
- 48 ,
- 49
- 50 축
- 51 소
- 52 )
- 53 '
- 54 ,
- 55
- 56 '
- 57 C
- 58 S
- 59 S
- 60
- 61 코
- 62 드
- 63
- 64 복
- 65 사
- 66 '
- 67 ]
팁
- [
- '
- j
- u
- s
- t
- i
- f
- y
- -
- c
- o
- n
- t
- e
- n
- t
- 와
- a
- l
- i
- g
- n
- -
- i
- t
- e
- m
- s
- 로
- 중
- 앙
- 정
- 렬
- 을
- 쉽
- 게
- 구
- 현
- 하
- 세
- 요
- '
- ,
- '
- f
- l
- e
- x
- -
- w
- r
- a
- p
- 을
- 사
- 용
- 하
- 면
- 반
- 응
- 형
- 레
- 이
- 아
- 웃
- 을
- 만
- 들
- 수
- 있
- 습
- 니
- 다
- '
- ]