1. flex는 왜 쓰나요?
이전까지 우리가 써왔던 display 속성값 block과 inline을 생각해보자. block은 박스 단위로 한 줄을 모두 차지하기 때문에 뒤에 다른 요소가 따라왔을 때 다음 줄로 넘겨버린다. inline은 줄바꿈 없이 한 줄에 나란히 요소들을 배치한다. 이 둘이 헤깔린다면 block은 p태그를, inline은 span태그를 떠올리면 된다.
그렇다면 flex는 왜 쓰는 걸까? 앞에서 말했듯이 줄바꿈 여부로 인해 block은 수직, inline은 수평 기반의 배치 모양에 갖혀있다. 이렇게 방향의 제약을 가지는 block과 inline에 비해 flex는 방향, 너비, 순서, 크기에 대한 여러 속성들을 사용해 더 다양하게 배치가 가능하다.
2. 속성
1) justify-content
item의 가로 배치를 담당하고 있다.
① flex-start: 왼쪽 정렬
② center: 가운데 정렬
③ flex-end: 오른쪽 정렬
④ space-around: item 양 옆에 각각의 값이 동일한 간격을 준다.
⑤ space-between: item을 동일한 간격으로 넓힌다.
⑥ space-evenly: item 양 옆의 빈 공간 너비가 동일하게 간격을 준다.
2) align-items
item의 세로 배치를 담당하고 있다.
① flex-start: 맨 위 정렬
② center: 세로선 상의 가운데 정렬
③ flex-end: 맨 아래 정렬
④ stretch: container 크기에 맞게 세로 길이를 늘린다.
3) flex-direction
item을 배치할 때 사용할 주축(column, row)과 방향(정방향, 역방향)을 지정한다.
① row: 가로축
② row-reverse: 가로축 역방향
③ column: 세로축
④ column-reverse: 세로축 역방향
4) flex-wrap
flex는 기본적으로 컨테이너 범위 안에 한 줄로 모든 item들을 집어넣으려는 특징이 있다. item에게 지정된 크기가 있더라도 이를 무시하고 크기가 자동 조절된다. 이것은 flex-wrap의 속성값이 nowrap으로 기본설정되어 있기 때문이다.
① nowrap: 모든 item을 한 줄에 정리한다.
② wrap: 줄바꿈이 일어난다.
③ wrap-reverse: 세로 기준 역방향으로 줄바꿈이 일어난다.
5) flex-flow
flow-direction과 flow-wrap을 혼합한 속성이다.
flex-flow: (flow-direction 속성값) (flow-wrap 속성값)6) align-content
justify-content는 가로 방향에서 item을 다양하게 배치할 수 있는 속성값을 가지고 있었다. align-content 또한 이와 비슷하게 여러줄로 존재하는 item을 '세로 방향'에 대하여 배치할 수 있게 해준다.
① flex-start: 맨 위 정렬
② center: 세로선 상의 가운데 정렬
③ flex-end: 맨 아래 정렬
④ space-around: item 위, 아래에 각각의 값이 동일한 간격을 준다.
⑤ space-between: item을 동일한 간격으로 띄운다.
⑥ space-evenly: item 위, 아래 빈 공간 너비가 동일하게 간격을 준다.
⑦ stretch: 세로 길이를 최대로 늘린다.
6) align-self
다른 속성들은 'display: flex'가 입력된 container에 함께 적용시켰다면, align-self는 container가 아닌 item에 개별로 적용시킨다. 이를 이용하여 item 일부만 변형시키는 것이 가능해진다.
① flex-start: 개별 범위 내에서 맨 위 정렬
② center: 개별 범위 내에서 세로선 상의 가운데 정렬
③ flex-end: 개별 범위 내에서 맨 아래 정렬
④ stretch: 개별 범위 내에서 세로 길이를 최대로 늘린다.
7) order
align-self와 마찬가지로 container가 아닌 item에 개별로 적용시킨다. 해당 item은 자신의 현 위치를 0으로 두고 왼쪽으로 한 item당 -1, 오른쪽으로 한 item당 +1로 계산하여 위치를 이동시킬 수 있다.
order: 5;8) flex
flex는 item에 개별로 적용시키며, item의 너비를 조절할 수 있다. flex-grow, flex-shrink, flex-basis를 혼합한 속성이다.
flex: (flew-grow 속성값) (flew-shrink 속성값) (flex-basis 속성값)① flex-grow: flex-basis의 값보다 커질 수 있는지
② flex-shrink: flex-basis의 값보다 작아질 수 있는지
③ flex-basis: 가장 기본 너비
flex-grow와 flex-shrink의 속성값이 0일 때는 flex-basis 값에서 절대 늘어나거나 줄어들 수 없다. 0보다 큰 값이 들어가야만 item의 너비가 변경된다.
그렇다면 flex 속성을 가진 item이 연달아 3개가 있다고 생각해보자. 이들은 각각 flex-basis를 통해 자신들의 기본이 되는 너비값을 갖고있다. flex-grow로 조절 가능한 너비는 전체에서 item들의 flex-basis 속성값, 즉 그들의 기본 너비를 뺀 나머지 너비를 비율에 따라 나눠 갖는다.
