Flexbox

CSS Flexbox 마인드맵 기본 구성요소와 지원되는 브라우저

시작하기. 무료입니다
또는 회원 가입 e메일 주소
Flexbox 저자: Mind Map: Flexbox

1. 다른 항목을 기준으로 축소되는 방법을 제어

2. items

2.1. order

2.1.1. [ integer ]

2.1.2. 아이템의 순서를 제어 ex) 1,2,3

2.2. flex-grow

2.2.1. [ number ] * default 0

2.2.2. 다른 항목을 기준으로 확대되는 방법을 제어

2.3. flex-shrink

2.3.1. [ number ] * default 1

2.4. flex-basis

2.4.1. [ length ] | auto * default auto

2.4.2. 항목의 초기 기본 크기

2.5. flex

2.5.1. [ flex-grow | flex-shrink | flex-basis ]

2.5.2. 단축형 속성

2.6. align-self

2.6.1. [ auto | flex-start | flex-end | center | baseline | stretch ]

3. container

3.1. justify-content

3.1.1. [ flex-start | flex-end | center | space-between | space-around ]

3.1.2. 주축에 따라 항목을 맞추는 방법을 설정

3.2. align-items

3.2.1. [ flex-start | flex-end | center | baseline | stretch ]

3.2.2. 교차축에 따라 항목을 맞추는 방법을 설정

3.3. align-content

3.3.1. [ flex-start | flex-end | center | space-between | space-around | stretch ]

3.3.2. justify-content와 유사하나 여러줄이 있을 경우 정렬을 설정

3.4. flex-direction

3.4.1. [ row | row-reverse | column | column-reverse ]

3.4.2. 기본축의 방향을 설정

3.5. flex-wrap

3.5.1. [ nowrap | wrap | wrap-reverse ]

3.5.2. 자식요소를 단일 또는 복수행이나 열로 줄바꿈할지 결정

3.6. flex-flow

3.6.1. [ flex-direction | flex-wrap ]

3.6.2. 단축형 속성

4. 제목없음

4.1. align-items를 재정의

4.2. 주축 : Main Axis

4.3. 교차축 : Cross Axis

4.4. direction 속성값에 따라 주축과 교차축은 변함

5. Description

5.1. 변천사

6. 속성값 이해 between : 중간에, around : 주위에

7. Bookmark

7.1. Generater

7.1.1. 구버전도 제공

7.2. slide

7.3. Link

7.3.1. 유연한 상자 레이아웃

7.4. Video

7.4.1. Leveling Up With Flexbox

8. Bug

8.1. CSS flex: Webkit, Android 2.1~4.3, IE 10 문제 해결.

8.2. flex bug 모음

9. Support

9.1. 2009 syntax - display:box

9.1.1. android 4.3이하(Stock브라우저)

9.1.2. iOS 6.1이하

9.1.3. Chrome 20이하

9.1.4. Firefox 21이하

9.2. Final syntax - display:flex

9.2.1. android 4.4이상

9.2.2. android 4.3이하(크롬브라우저)

9.2.3. iOS 7.1이상

9.2.4. internet explorer 11

9.3. 2011 hybrid syntax - display:flexbox

9.3.1. internet explorer 10