Flexbox 사용법!
예전에는 레이아웃을 만들기 위해 position, float, table을 이용했다.
이것들로는 박스 안의 아이템들을 수직으로 가운데 정렬하는 것, 아이템들의 사이즈에 상관없이 동일한 간격, 사이즈로 박스 안에 배치하는 것, 박스를 동일한 높이로 두는 것 등을 하는데 제약사항이 있었다.
Flexbox로 위의 것들을 손쉽게 할 수 있다.
중요한 것!
첫 번쨰
Flexbox는 container에 적용할 수 있는 속성 값, item들에 적용할 수 있는 속성 값이 존재한다.
Container
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
Item
- order
- flex-grow
- flex-shrink
- flex
- align-self
두 번째
Flexbox에는 중심축과 반대 축이 있다.
수평으로 정렬되어 있을 때, 수평축이 중심축, 수직축이 반대축이 된다.
Container
flex-direction
container에 display: flex; 를 지정하면 아이템들이 가로로 정렬될 건데, flex-direction 속성이 row로 기본 지정되어있기 때문이다.
flex-direction 속성을 row-reverse로 지정하면 수평축을 중심축으로 반대쪽부터 반대 순서로 정렬된다.
column 이면 수직축이 중심축이 된다.
column-reverse 이면 바닥부터 반대 순서로 정렬된다.
flex-wrap
기본값은 nowrap이다. 창을 줄여도 item들이 무조건 한 줄로 나열되게 된다.
flex-wrap: wrap;을 적용하게 되면 한 줄이 다 찼을 때 자동으로 다음 줄로 넘어가게 된다.
flex-flow 속성으로 flex-direction과 flex-wrap속성을 한 번에 설정할 수 있다. ex) flex-flow: column wrap;
justify-content
justify-content는 중심축에서 item들을 어떻게 배치할 것인지 결정한다.
기본값은 flex-start이다. 왼쪽부터 item들을 배치한다.
수직축이 중심축이라면 위부터 item들을 배치한다.
flex-end는 flex-direction속성의 reverse와 다르게 item들의 순서를 유지한 채, 오른쪽, 아래로 붙인다.
center는 item들이 중심축의 중간으로 정렬시킨다.
space-round는 각 item의 주위에 일정한 space를 준다.
space-between은 맨 끝의 item을 화면 끝에 붙이고 중간의 item들 사이에 일정한 space를 준다.
align-items
align-items는 반대 축에서 item 전체를 어떻게 배치할 것인지 결정한다.
center는 item들을 반대축 기준 중간으로 정렬한다.
이렇게 텍스트 위치가 균일하지 않을 때
align-items에 baseline을 적용하면 텍스트 위치가 균일하게 배치된다.
align-content
align-content는 반대축에서 item들을 어떻게 배치할 것인지 결정한다. 한 줄일 경우 효과가 없다.
space-between은 맨 끝의 item들을 위아래로 붙이고 중간에 일정한 space를 준다.
나머지 justify-content의 값들도 사용할 수 있다.
Item
flex-grow
flex-grow는 container가 커졌을 때 공간을 item들이 어떤 비율로 채울 것인지 정한다. 기본값은 0이다.
flex-grow값이 지정된 item들끼리 container의 공간을 할당받는다.
1번만 container를 모두 채운 걸 볼 수 있다.
모든 item에 flex-grow를 동일하게 주면 같은 비율을 가지게 된다.
2, 1, 1로 주면 container가 커질 때 2 : 1 : 1의 비율로 item의 크기가 늘어난다.
flex-shrink
flex-shrink는 container가 작아졌을 때 item들이 어떤 비율로 작아질 것인지 정한다. 기본값은 0이다.
container가 기본값으로 채워졌을 때보다 작아질 때 첫 번째 아이템만 2배 더 작아지게 된다.
flex-basis
flex-basis는 item의 초기값을 지정한다. width를 나타내는 단위, %로 지정할 수도 있다. 기본값은 auto.
align-self
align-self는 item별로 정렬을 할 수 있게 해 준다. align-items의 값들을 사용한다.