반응형 웹 만들기(3) - 플렉서블 박스
<Do it! 반응형 웹 페이지 만들기>, 김운아 지음
이 책으로 공부 중!04 플렉서블 박스
04-1 기본 개념 : 기존 속성들로는 박스의 배치 순서의 자유로운 변경 불가능했으나 플렉서블 박스의 등장으로 박스 요소들을 다양하고 자유롭게 조작 가능해짐
개념 1) 플렉서블 박스 = 부모박스
- wrap처럼 모든 요소를 감싸고 있는 부모박스. 부모박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동됨
개념 2) 플렉서블 박스의 자식박스 = 플렉스 아이템
- 부모박스가 플렉서블 박스로 작동한 순간부터 그 안의 자식박스들은 '플렉스 아이템'이란 이름을 달고 작동.
개념 3) 플렉서블 박스의 축 - 주축과 교차축
- 주축 : 주축을 따라 플렉스 아이템이 배치됨. 주축이 가로일 경우 박스들이 왼쪽에서 오른쪽으로 배치되고, 주축이 세로일 경우 박스들이 위에서 아래로 배치됨
- 교차축 : 주축에 교차하는 축으로 주축에 따라 세로/가로축이 됨
- 축의 방향
- 축의 시작과 끝
04-2 기술 익히기
플렉서블 박스 기본 설정
속성명 | 속성값 | 적용 요소
display | flex, inline-flex | 모든 요소
>> flex : 박스를 블록 수준의 플렉서블 박스로 작동
>> inline-flex : 박스를 인라인 수준의 플렉서블 박스로 작동
** 브라우저 접두사 사용 : display: -webkit-flex; 웹 키트 계열 전용 접두사
플렉스 아이템 배치방향 설정
속성명 | 속성값 | 적용 요소
flex-direction | row(기본값), row-reverse, column, column-reverse | 플렉서블 박스
>> row : 왼쪽에서 오른쪽으로 배치
>> row-reverse : 오른쪽 -> 왼쪽
>> column : 위 -> 아래
>> column-reverse : 아래 -> 위
플렉스 아이템 여러 줄로 배치
속성명 | 속성값 | 적용 요소
flex-wrap | nowrap(기본값), wrap, wrap-reverse | 플렉서블 박스
>> nowrap : 박스를 한 줄로 배치(기본값)
>> wrap : 박스를 여러 줄로 배치
>> wrap-reverse : 박스를 여러 줄로 배치하되 역방향으로 배치
플렉스 아이템 배치방향과 여러 줄 배치 한 번에 설정
속성명 | 속성값 | 적용 요소
flex-flow | [flex-direction] [flex-wrap], row nowrap(기본값) | 플렉서블 박스
>> [flex-direction] [flex-wrap] : 첫번째 속성값에 박스의 배치 방향을 설정하는 값을, 두번째 속성값은 박스 여러 줄 배치하는 속성값을 작성. 사이에 띄어쓰기 필수!
주축 방향으로 다양하게 플렉스 아이템 배치하기
속성명 | 속성값 | 적용 요소
justify-content | flex-start(기본값), flex-end, center, space-between, space-around | 플렉서블 박스
>> flex-start : 자식박스를 부모박스 주축의 시작점으로 배치. 기본값
>> flex -end : 자식박스를 부모박스 주축의 끝점으로 배치
>> center : 자식박스를 부모박스의 중앙으로 배치
>> space-between : 첫번째 박스와 마지막 박스는 양 끝에 붙이고 나머지 박스는 동일한 간격으로 정렬
>> space-around : 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬
교차축 방향으로 다양하게 플렉스 아이템 배치하기
속성명 | 속성값 | 적용 요소
align-items | stretch(기본값), flex-start, flex-end, center, baseline | 플렉서블 박스
>> stretch : 박스를 확장해서 배치. 기본값
>> flex-start : 박스를 교차축의 시작점에 배치
>> flex-end : 박스를 교차축의 끝점에 배치
>> center : 박스를 교차축의 중앙에 배치
>> baseline : 자식박스들을 교차축의 시작점에 배치되는 자식박스의 글자 베이스라인에 맞춰 배치
교차축 방향으로 플렉스 아이템 개별적 배치하기
속성명 | 속성값 | 적용 요소
align-self | auto, stretch, flex-start, flex-end, center, baseline | 플렉스 아이템
>> auto : 플렉서블 박스의 align-items 속성값을 상속받음. 부모박스에 적용된 속성값이 없는 경우 stretch 속성값 적용
여러 줄인 플렉스 아이템을 교차축 방향으로 다양하게 배치하기
속성명 | 속성값 | 적용 요소
align-content | stretch(기본값), flex-start, flex-end, center, space-between, space-around | 플렉서블 박스
* align-content 속성값은 justify-content 속성값과 같으므로 생략
플렉스 아이템의 배치 순서 바꾸기
- 기본적으로 HTML 태그들을 작성순서대로 배치되지만, 플렉서블 박스 속성을 적용해 박스 배치 순서를 자유롭게 변경 가능
속성명 | 속성값 | 적용 요소
order | 0(기본값), 정숫값 | 플렉스 아이템
플렉스 아이템 크기 변경
- 플렉스 아이템이 플렉서블 박스보다 크거나 작을 때 여백이나 넘치는 문제 발생. 이때 자식박스들의 크기를 늘리거나 줄일 수 있음
속성명 | 속성값 | 적용 요소
flex | [flex-grow] [flex-shrink] [flex-basis] | 플렉스 아이템
* 사용가능 값 : 0 1 auto(기본값), 0 auto(= 0 1 auto), initial, auto, none
>> [flex-grow] : 플렉서블 박스에 여백이 있을 때 플렉스 아이템의 크기를 늘릴 수 있는 속성
>> [flex-shrint] : 플렉서블 박스 안의 플렉스 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성
>> [flex-basis] : 플렉스 아이템의 기본 크기를 설정하기 위한 속성.
[끝]
