
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