Flex Position - Flexbox Layout
1. 정의
- CSS3에서 새롭게 명세된 레이아웃 방법
- 요소들을 자유롭게 빈공간을 채워 나간다
- 아직 버그가 발견되며 IE10에서는 -ms-붙여 사용
- flex layout은 크게 부모와 자식으로 이루어져 있다
2. 부모요소
1) flexbox layout 선언
- display : flex(inline-flex) 부모 객체의 선언 함으로서 flex layout 생성한다
2) flexbox layout 옵션
A. flex-direction
- 컨테이너 자식 요소들의 방향성을 결정
- row : 기본값, 수평으로 요소의 방향성은 좌 -> 우
- row-reverse : 수평, 우 -> 좌
- column : 수직(행) , 상 -> 하
- column-reverse : 수직(행), 하 -> 상
B. flex-wrap
- 자식 요소들 줄넘김 처리
- nowrap : 기본값, 요소들 한 줄에 모두 표현
- wrap : 적정 길이가 넘어가면 줄 아래로 이동
- wrap-reverse : wrap과 동일, 하지만 역 방향
c. justify-content
- 컨테이너에 빈공간이 있다면 자식 요소들을 수평으로 정렬하는 방법
- flex-start : 하나로 묶어서 시작점에 위치
- flex-end : 하나로 묶어서 끝에 위치
- center : 가운데 위치
- space-between : 양쪽 끝에 맞춰 정렬
- space-around : 일정한 간격으로 정렬
D. align-items
- 컨테이너의 빈공간이 있다면 수직으로 정렬, justify-content의 수직 버전
- flex-start : 시작점의 위치
- flex-end : 끝에 위치
- center : 가운데 위치
- baseline : baseline 기준
- stretch : 양 끝을 기준으로 일정 공간을 만든다
E. flex-flow
- flex-direction 과 flex-wrap 을 한 줄에 정의할 때 쓴다
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [CSS3] @media 쿼리 (0) | 2016.12.18 |
|---|---|
| [CSS] @media 타입 (0) | 2016.12.18 |
| [CSS] HTML 요소 가운데 정렬 쉽게 하기 (0) | 2016.12.13 |
| [CSS] Height 100% 하는법 (0) | 2016.12.13 |
| [CSS] 3단 레이아웃 (float, display) (0) | 2016.12.11 |
리딩리드