1. 개요
display의 속성값 중 하나인 flex가 적용된 레이아웃 flexbox를 활용하는 방법을 다룬다.
flex는 부모 요소에 설정하여 자식 요소를 1차원으로 배치할 수 있게 지원하는 속성이며,
주로 다음과 같은 요구사항을 달성하기 위해 고안되었다.
수직 정렬
부모 요소 내부에 포함된 block 컨텐츠를 세로로 중심부에 맞추기
align-items: center;균등 분배
사용 가능한 너비·높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 너비·높이를 똑같은 크기로 점유하기
flex: 1, flex-grow동일 높이 맞추기
다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 컨텐츠를 포함해도 동일한 높이로 채택하기
align-items: stretch
이 외의 다양한 요구사항들이 있다.
부모 요소에 display: flex;를 적용하면 부모 요소는 flex container가 되고, 자식 요소들이 flex item이 된다.
부모 요소가 inline 속성을 띄게 하고 싶으면 display: inline-flex를 적용한다.
2. flexbox 레이아웃 구조
main axis(기본 축):
flex item이 배치되고 있는 방향으로 진행하는 축이다.
배치되고 있는 방향이 행이면 가로, 열이면 세로 방향이다.
시작 부분은 main start, 끝은 main end이다.cross axis(교차 축):
flex item이 배치되고 있는 수직 방향으로 진행하는 축이다.
이하 main과 맥락을 공유한다.flex container:
display: flex가 설정된 부모 요소를 말한다.flex item:
flex container 내부를 구성하는 자식 요소들을 말한다.
기본 축을 지정하고 싶으면 flex container(=부모 요소)에 flex-driection을 설정한다.
column을 넣으면 열로 배치되고, row-reverse나 column-reverse로 역방향 배치도 가능하다.
레이아웃의 너비 혹은 높이가 고정된 상황에서 flexbox의 자식 요소가 컨테이너에 다 담기지 못하고 넘치는 문제가 생길 수 있다.
이 때 부모 요소에 flex-wrap: warp;을 추가하고 자식 요소에 flex: 200px;을 지정하는 방식으로 각 자식 요소에 공간을 지정할 수 있다.
3. flex item의 flex 크기 조정
flexbox의 공간을 각 flex item이 얼마나 점유할지 결정할 수 있다.
단위가 없는 비율 값이라는 특징이 있다.
article {
flex: 1;
}위와 같이 설정할 수 있다.
의미는 "padding, margin 여백이 지정된 이후 남은 공간을 모두 동등한 크기로 점유한다"이다.
flex: 2;는 두 배로 차지한다.
각 flex item이 먼저 사용 가능한 공간에서 공간을 부여받은 후 나머지 공간을 비례에 따라 분배받는 방법도 있다.
article {
flex: 1 200px;
}위의 의미는 "먼저 200px의 최소 크기를 할당받고, 남은 공간이 있으면 동등한 크기로 점유한다"이다.
4. flex는 약칭 속성이다
flex는 세 가지의 서로 다른 속성의 약칭 속성이다. 종류는 다음과 같다.
flex-grow:
flex 컨테이너 내에 남은 공간이 있을 경우 flex item이 그 남은 공간을 얼마만큼 나누어 가질지 결정한다.
기본값은 0이고, 1은 균등하게, 2는 2배의 비율이다.flex-shrink:
flex item들의 크기가 flex 컨테이너의 크기를 초과해 공간이 부족할 경우 item이 얼마나 줄어들지 결정한다.
기본값은 1이고(모든 아이템이 줄어듦), 값이 커질수록 다른 item보다 더 많이 줄어든다. 0으로 설정하면 줄어들지 않는다.flex-basis:
flex item이 주 축 방향으로 가질 수 있는 기본 크기를 결정한다.
item이 늘어나거나 줄어들기 전 기준이 되는 크기
기본값은 auto이고, px, em, % 단위를 사용해 지정한다.
article {
flex: 1 1 200px;
}
article {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}위의 두 설정은 동일하다.
5. 수평 및 수직 정렬
flexbox는 기본 축(main axis) 또는 교차 축(cross axis)을 따라 flex item을 정렬할 수 있다.
정렬에 관여하는 대표적인 속성들은 다음과 같다.
align-items:
부모 요소(컨테이너)에 지정하며, flex item을 교차 축 어디에 놓을지 결정한다.
기본값은 stretch이다. 교차 축 방향으로 부모 요소를 채우기 위해 모든 flex item을 팽창시킨다.
부모 요소에 교차 축 방향으로 폭이 지정되지 않았다면 모든 flex item은 최장 항목만큼 길어진다.
center 값을 넣어서 가운데 정렬에 활용할 수 있다.align-self:
자식 요소인 개별 flex item에 지정하며, align-items 동작을 단일로 재지정할 수 있다.justify-content:
부모 요소(컨테이너)에 지정하며, flex item들을 기본 축 어디에 놓을지 결정한다.
기본값은 flex-start이고, 모든 항목을 기본 축의 시작 부분에 놓이도록 만든다. flex-end로 끝에 놓을 수도 있다.
center 값을 넣어서 가운데 정렬에 활용할 수 있다.
space-between, space-around도 있다. 둘 다 모든 항목을 기본 축을 따라 고르게 분배하지만 between은 공간을 남기지 않고, around는 남긴다.
6. flex item 순서 정하기
flexbox는 HTML 소스 순서에 영향을 미치지 않고 item의 레이아웃 순서를 변경할 수 있다.
order 속성을 이용해 지정할 수 있다. 기본값은 0이다.
button:first-child {
order: 1;
}위와 같이 설정하면 button 요소의 첫 번째 자식 요소의 순서가 바뀌어 보인다.
지정한 숫자가 높으면 order가 낮은 것보다 나중에 나타난다.
순위가 동일하면 항목들은 순서대로 나타난다.
7. 번외
flex item을 flex container로 지정해 중첩 flexbox를 만들 수 있다.
이 때 그 컨테이너의 자식도 flexbox처럼 배치된다.
flexbox는 크롬, 엣지, 파이어폭스, 오페라, IE11 등 대부분의 브라우저에서 지원한다.