Flex-box
는 box
정렬의 끝판왕이다!!
기존에 요소들의 수직 정렬은 크게 문제가 되지 않았지만, 수평 정렬의 경우 float
와 clearFix
, display: inline-block
의 도움을 받아왔다.
하지만 이러한 방법들은 다양한 문제들 (레이아웃 망가짐..)이 존재한다.
결론은 수평 레이아웃 구성의 차선책일 뿐이며, 이에 효과적인 방법은 바로 Flex-box
이다.
사용 방법은 크게 3단계로 나뉜다!! (추가로 VSC의 CSS Flexbox Cheatsheet
extenstion에 사용법이 아주 잘 나와 있다.)
display: flex
선언- 가로 정렬?, 세로 정렬?
- 무조건 한 줄 안에 다 정렬?
- flex party~!!(아이템 배치, 간격 조정 등...)
정렬하고자 하는 요소들의 부모 요소에 display: flex
속성을 부여한다.
flex
,inline-flex
가 존재하는데, 이는 부모 요소들이 수직 쌓임이냐, 수평 쌓임이냐의 차이이다.
(마치 block
, inline-block
차이 같은?..)
flex
,inline-flex
두 값의 차이는 내부 items
들에게 영향을 끼치지 않는다.
flex-direction
은 정렬 방향 (수평?, 수직?)을 결정하는 속성값이다. ( main axis를 결정)
row
, row-reverse
, column
,column-reverse
4가지가 있다.
따로 속성값을 표기하지 않았을 시, 기본값은 row
이다.
nowrap
: 자식 요소들의 사이즈를 줄여서라도 한 줄로 정렬할 때 사용한다. (무조건 한줄!!)
wrap
: 한 줄에 모두 정렬하기에 공간이 충분지 않으면 여러줄을 생성 (자식 요소의 사이즈 변동 X)
속성값을 따로 지정하지 않을 시, nowrap
이 기본값으로 설정되어 있다.
main-axis
,cross-axis
는 flex-direction
에 의해 결정이 된다.
axis
결정은 정렬 속성인 justify-content
, align-items & content
에 영향을 미친다.
flex-direction: row
일 경우, main-axis
가 가로축, cross-axis
가 세로축이 된다.flex-direction: column
일 경우, main-axis
가 세로축, cross-axis
가 가로축이 된다.main-axis
기준 방향으로 content
의 정렬 방법을 지정한다. (row
의 경우 가로 방향, column
의 경우 세로 방향)space-around
와 space-evenly
는 얼핏 보면 비슷해보이나, 위처럼 가장 외곽에 있는 content
의 margin
에 차이가 있다.cross-axis
에 배치된content
들의 정렬 방법을 지정한다.
한줄에 배치된 content
들에게 적용할 때 주로 사용한다. (flex-wrap: nowrap
참고)
align-items
와 마찬가지로 cross-axis
의 배치된 content
들의 정렬 방법을 지정한다.
align-items
와 달리, 2줄 이상의 content
가 있을 시 적용이 가능하다.