1. 플렉시블 박스 (Flexible Box)
ㅇ 웹사이트 화면의 구조 설계를 보다 쉽게 하기 위해,
- 가변적인 박스로 만들어서,
- 이들을 화면에 정렬(배치)시키는 CSS 기술
2. CSS Flex ☞ MDN Flexbox docs 참조
ㅇ container 속성 (플렉시블 부모 박스의 속성)
- display : flex | inline-flex;
. flex : 블록 요소처럼 동작하여 가로폭을 가득 채움
. inline-flex : 인라인 요소처럼 동작하여 필요한 너비만큼만 차지하고,
.. 다른 인라인 요소들과 함께 한 줄에 배치됨
- flex-direction : row (기본) | row-reverse | column | column-reverse;
. row : 수평 줄 방향 (좌에서 우로)
. column : 수직 열 방향 (위에서 아래로)
- flex-wrap : nowrap (기본) | wrap | wrap-reverse;
. 한 줄에 flex item들을 모두 수용할 지 아니면 줄바꿈할 지 여부
. wrap-reverse : 여러 줄로 배치하되, 역 방향
- flex-flow (단축 속성) : (flex-direction) (flex-wrap);
. (flex-direction),(flex-wrap)를 한번에 지정할 수 있는 단축 속성
- justify-content (주축 방향) : flex-start (기본) | flex-end | center | space-between
| space-around | space-evenly;
. (주축 방향 : flex-direction 속성이 가리키는 정해진 방향)
. 항목 배치의 정렬 기준을 정함 ☞ MDN docs (justify-content) 참조
.. space-around (고른 분배 후 양쪽끝 공간 줌)
.. space-between (고른 분배 후 양쪽끝 공간 없음)
.. space-evenly (균등 간격)
- align-items (교차축 방향) : stretch (기본) | flex-start | flex-end | center | baseline;
. (교차축 방향 : 주축에 수직한 방향)
. stretch (아이템 박스들의 크기를 확장시켜 배치)
.. 높이 미설정 item들의 경우에, 주변 가장 큰 height 또는 weight와 같게 함
. flex-start, flex-end (아이템 박스들을 가장자리 처음,마지막 끝선에 정렬)
. center (아이템 박스들을 중간선으로 정렬)
. 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 : (순서 정수값, 기본값 0)
. 아이템 박스들의 순서 바꾸기
. 숫자의 크기를 이용하여, 순서 배치할 수 있으며, 음수 값도 가능
- align-self (교차축 방향) : flex-start (기본) | flex-end | center | baseline
| stretch | auto
. 항목별로 일일이 속성값을 정해주면서 개별적으로 배치
. auto : 부모 박스의 align-items 속성값을 상속 받음
.. 만일, 부모 박스 속성값이 없으면, strech 속성값이 적용됨
* 아래 속성들은, 플렉스 아이템들의 크기를 점진적으로 늘리고 줄일 수 있음
- flex-grow : 0 (기본 : 0 보다 큰 값) | (크기 늘리는 양의 정수값 : 비율값)
. 1 : 항목 크기가, 전체 크기에 비례하여, 똑같이 커짐 (단순 비례)
- flex-shrink : 1 (기본 : 1 보다 큰 값) | (크기 줄이는 양의 정수 값 : 비율값)
. flex-basis와 연동되어, 그 기본 크기 보다 정해준 배수 값으로 줄여줌
. 그러나, flex-basis로 정해준 기본 크기를 넘으면, 더 이상 flex-shrink 영향 없게 됨
- flex-basis : auto (기본) | (length : 비율값)
. 적정 너비의 기본 크기를 정해주는 값
. (px,%,em,rem 등 단위로 직접 크기 값을 줌, 기본값 auto)
- flex (단축 속성) : (flex-grow) (flex-shrink) (flex-basis)
. (flex-grow),(flex-shrink),(flex-basis)를 한번에 지정할 수 있는 단축 속성
. 1 1 auto (기본값)
. 0 auto (0 1 auto 동일)
. initial (0 1 auto 동일)
. auto (1 1 auto 동일)
. none (0 0 auto 동일)