css16

플렉서블 박스 레이아웃

1그리드 레이아웃을 기본으로 플렉스 박스를 원하는 위치에 배치하는 것
여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있음
플렉스 컨테이너-주축(배치해야할 기본방향, 가로)-교차축(세로)
2플렉서블 박스 레이아웃 기본 속성
display 속성
배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정
felx, inline-flex
display 속성과 브라우저 접속사
버전에 따라 다름
.wrapper{
display:-webkit-box;   iOS 6이하, 사파리3.1
display:-moz-box;      파이어복스 19이하
display:-ms-flexbox;   IE 10
display:-webkit-flex;   웰킷 구 버전
display:flex;                표준 스펙
3flex-direction 속성
플렉스 항목 배치 방향 지정(주축 어디로 하고 어느 방향)
row: 주축 가로로, 교차축 세로로, 시작점에서 끝점으로(왼쪽에서 오른쪽으로) 배치
row-inverse: 주축 가로, 교차축 세로, 끝점에서 시작점으로(오른쪽에서 왼쪽으로)
column: 주축 세로로 교차점 가로로, 시작점에서 끝점으로(위쪽에서 아래쪽으로)
column-inverse: 주축 세로로 교차점 가로로, 시작점에서 끝점으로(아래쪽에서 위쪽으로)
4flex-wrap 속성
플렉스 항목을 한 줄 또는 여러 줄로 표시
ro-wrap: 한줄에 표시, 기본값
wrap: 여러 줄에 표시
wrap-inverse 여러 줄에 표시, 반대 방향
5flex-flow 속성
플렉스 배치 방향과 여러 줄 배치 한꺼번에 지정
기본값: flex-flow:row no-wrap
6order 속성
플렉스 항목의 배치 순서 바꾸기

1플렉스 항목 배치를 위한 속성
jusift-content 속성
주축 방향으로 배치할 때의 배치 기준
start 시작점, end 끝점,center 중앙 space-between 첫 번째 플랙스 항목에 마지막 플랙스 항목은 시작점과 끝점에 배치한 후 중앙 항목들은 같은 간격으로 배치
space-around: 모든 플랙스 항목들을 같은 간격으로 배치
2align-item 속성
교차축을 기준으로 하는 배치 방법 조절
stretch: 플렉스 항목을 호가장에 교차축을 꽉 채움, 기본값...
3align-content 속성
플렉스 항목이 여러 줄로 표시되고 교차 축 기준의 배치 방법 기준

1flex 속성
플렉스 항목 크기 조절
flex-grow: 얼마나 늘어날것인지
flex-shrink: 얼마나 줄어들것인지
flex-basis: 표시할 수 있는 기본 너비 값
기본값: flex: 0 1 auto;