CSS3 : Flexible Box

---

Flexible Box 정리용.  ( 2013 save )

display: flex; 박스플랙스
display:inline-flex; 인라인플랙스
display:-webkit-flex; 웹킷 박스플랙스

flex-direction:row; 왼쪽에서 오른쪽(기본)
flex-direction:row-reverse; row역방향
flex-direction:column; 위에서 아래
flex-direction:column-reverse; column역방향

flex-wrap:nowrap; 한줄배치
flex-wrap:wrap; 여러줄배치
flex-wrap:wrap-reverse; wrap역방향
flex-flow:row wrap-reverse; 두개 한방에. 

justify-content:flex-start; 주축 시작(기본)
justify-content:flex-end; 주축의 끝으로
justify-content:center; 가운데
justify-content:space-between; 박스 사이간격 동일
justify-content:space-around; 사이간격동일 자동정렬

align-items:stretch; 세로값100%? 기본
align-items:flex-start; 시작점에 배치
align-items:flex-end; 끝점에 배치
align-items:center; 중앙에 배치
align-items:baseline; 글자 베이스라인에 배치

align-self:auto; (부모값상속) 아이템 개별배치
align-self:stretch; 부모값 없을경우 기본
align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:baseline;

-박스가 여러줄일때 (교차축방향배치) 
align-content:stretch; 기본값 100%
align-content:flex-start; 시작점으로
align-content:flex-end; 끝부분으로
align-content:center; 가운데
align-content:space-between; 사이간격동일
align-content:space-around; 골고루간격



-배치순서
order:0; 기본값. 정수로선언. 

-아이템 크기! 가변박스모드 (이건 한번 더 볼것)
flex:grow shrink basis
flex:0 1 auto; 기본
flex: 0 auto;
flex:initial;
flex:auto;
flex:none;

 

w3schools.com 플렉시블 박스

CSS Flexbox (Flexible Box)

w3.org 플렉시블박스 레이아웃 모듈

CSS Flexible Box Layout Module Level 1

CSS3 Flexbox Essentials Flexible Box Layouts Tutorial