Flexbox

1. items

1.1. order

1.1.1. [ integer ]

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

1.2. flex-grow

1.2.1. [ number ] * default 0

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

1.3. flex-shrink

1.3.1. [ number ] * default 1

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

1.4. flex-basis

1.4.1. [ length ] | auto * default auto

1.4.2. 항목의 초기 기본 크기

1.5. flex

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

1.5.2. 단축형 속성

1.6. align-self

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

1.6.2. align-items를 재정의

2. container

2.1. justify-content

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

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

2.2. align-items

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

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

2.3. align-content

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

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

2.4. flex-direction

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

2.4.2. 기본축의 방향을 설정

2.5. flex-wrap

2.5.1. [ nowrap | wrap | wrap-reverse ]

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

2.6. flex-flow

2.6.1. [ flex-direction | flex-wrap ]

2.6.2. 단축형 속성

3. 제목없음

3.1. 주축 : Main Axis

3.2. 교차축 : Cross Axis

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

4. Description

4.1. 변천사

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

6. Bookmark

6.1. Generater

6.1.1. 구버전도 제공

6.2. slide

6.3. Link

6.3.1. 유연한 상자 레이아웃

6.4. Video

6.4.1. Leveling Up With Flexbox

7. Bug

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

7.2. flex bug 모음

8. Support

8.1. 2009 syntax - display:box

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

8.1.2. iOS 6.1이하

8.1.3. Chrome 20이하

8.1.4. Firefox 21이하

8.2. Final syntax - display:flex

8.2.1. android 4.4이상

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

8.2.3. iOS 7.1이상

8.2.4. internet explorer 11

8.3. 2011 hybrid syntax - display:flexbox

8.3.1. internet explorer 10