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