1. 플렉시블 박스 (Flexible Box)
ㅇ 웹사이트 화면의 구조 설계를 쉽게 하기 위해, 가변적인 박스를 만들어내는 CSS 기술
2. CSS Flex
※ ☞ MDN Flexbox docs 참조
ㅇ container 속성
- display : flex;
- flex-direction : row (기본) | row-reverse | column | column-reverse;
. row : 수평 줄 방향
. column : 수직 열 방향
- flex-wrap : nowrap (기본) | wrap | wrap-reverse;
. 한 줄에 flex item들을 모두 수용할 지 여부
- flex-flow : (flex-direction) (flex-wrap);
. (flex-direction),(flex-wrap)를 한번에 지정할 수 있는 단축 속성
- justify-content : flex-start (기본) | flex-end | center | space-between | space-around |
space-evenly;
. 항목 배치의 기준을 정함
.. space-between (가장자리 우선)
.. space-around (가장자리 공간 줌)
.. space-evenly (균등 간격)
- align-items : flex-start | flex-end | center | stretch | baseline;
. flex-start, flex-end, center (아이템 박스의 가장자리 끝선, 중간선으로 정렬)
. stretch (높이 미설정 item들에 주변 가장 큰 height 또는 weight와 같게 함)
. baseline (아이템 박스 내부의 텍스트를 기준선으로 맞춤)
- align-content : flex-start | flex-end | center | stretch | space-between | space-around;
. (아이템 박스 내부의 컨텐츠 기준으로 정렬)
. flex-start, flex-end, center (아이템 박스 내부의 컨텐츠 기준으로 수직 정렬)
. stretch (각 item 높이를 가능한 최대로 넓혀 수직 정렬)
. space-between, space-around (가장자리에 붙이거나, 주가장자리 공간 줌)
ㅇ item 속성
- order : (순서 정수값)
. 항목 배치 순서 : 숫자를 이용하여 순서 배치할 수 있으며, 음수 값도 가능
- flex-grow : (크기 늘리는 양의 정수값, 기본값 0 : 0 보다 큰 값)
. 1 : 항목 크기가, 전체 크기에 비례하여, 똑같이 커짐 (단순 비례)
- flex-shrink : (크기 줄이는 양의 정수 값, 기본값 1 : 1 보다 큰 값)
. flex-basis와 연동되어, 그 기본 크기 보다 정해준 배수 값으로 줄여줌
. 그러나, flex-basis로 정해준 기본 크기를 넘으면, 더 이상 flex-shrink 영향 없게 됨
- flex-basis : (length) | auto(기본)
. 적정 너비의 기본 크기를 정해주는 값
. (px,%,em,rem 등 단위로 직접 크기 값을 줌, 기본값 auto)
- flex : none | (flex-grow) (flex-shrink) (flex-basis)
. (flex-grow),(flex-shrink),(flex-basis)를 한번에 지정할 수 있는 단축 속성
. (기본값) 1 1 auto
- align-self : auto | flex-start (기본) | flex-end | center | baseline | stretch
. 항목별 개별 배치