flexbox 는 정렬의 끝판왕이다.
float, clearfix, 복잡한 margin 계산 없이
보다 직관적으로 요소를 배치할 수 있다.
강의를 들으며 배운 내용을 정리해본다.
1. flexbox 는 누구한테 써야 할까?
.flexbox {
display: flex;
}flex 를 쓰겠다고 선언하는 건 알겠는데,
그걸 누구한테 써야 하냐가 제일 중요하다.
→ 정렬하고 싶은 요소들을 감싸고 있는 부모에게 써야 한다.
예를 들어,
이 3개의 block을 정렬하고 싶다면
정렬하고자 하는 요소를 감싸고 있는 부모에게 display: flex; 를 하면 된다.
2. 가로 정렬? 세로 정렬?
.flexbox {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}display: flex; 를 선언하는 순간 두개의 축이 생긴다.
- main axis
- cross axis
flex-direction: row 일 때
flex-direction: row-reverse 일 때
flex-direction: column 일 때
flex-direction: column-reverse 일 때
3. 무조건 한 줄에 다 정렬할까?
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: nowrap | wrap;
}flex-wrap: nowrap (기본값)
부모 width가 600px이고 자식이 300px짜리 3개라면?
원래는 900px가 필요하지만
flex 는 자식 크기를 줄여서라도 한 줄에 정렬해버린다.
flexwrap: wrap
wrap 은 자식 크기를 줄이지 않는다.
사이즈를 유지하고 싶을 때 wrap 을 사용하면 된다.
4. 축을 기준으로 정렬하기
flex-direction 에 따라 main axis / cross axis 가 생긴다.
정렬할 때는
어느 축을 기준으로 정렬할지 생각해야 한다.
① justify-content
내가 선언한 flex-direction과 같은 방향
즉, main axis 기준에 따라 정렬해주고 싶을 때 사용한다.
justify-content: flex-start | flex-end | center | space-between | space-around |space-evenly;flex-start: 요소들이 왼쪽부터 차곡차곡 붙음flex-end: 요소들이 오른쪽 끝으로 붙음center: 요소들이 가운데로 모여서 정렬space-between: 첫 요소는 왼쪽 끝, 마지막 요소는 오르쪽 끝으로 붙고 그 사이 간격을 똑같이 벌려줌space-around: 요소 주변에 공간을 배치, 요소 사이 간격이 바깥 간격보다 2배처럼 보임space-evenly: 요소 사이 간격 = 바깥 간격 = 전부 동일
예시
-
flex-direction: row일 때- main axis: 가로 (왼→오)
justify-content= 가로 정렬
-
flex-direction: column일 때- main axis: 세로 (위→아래)
justify-content= 세로 정렬
★★ 즉, justify-content 는 '가로 정렬 속성'이 아니라 '주축 정렬 속성'이다.
② align-items/align-content
cross axis 기준에 따라 정렬해주고 싶을 때 사용한다.
②-1. align-items
align-items 는 요소들이 한 줄에 있든 여러 줄에 있든,
한 줄 안에서 요소의 세로/가로 위치를 정한다.
space-between,space-around는 사용하지 못한다.
②-2. align-content
align-content 는 요소 하나하나가 아니라
여러 줄을 교차축 방향으로 어떻게 배치할지 정한다.
단,
flex-wrap: wrap 이고 줄이 2줄 이상 생겼을 때만 가능하다.
space-between,space-around는 사용 가능하다.
★★ align-items/align-content 중 어떤 걸 사용해야 하는지 헷갈릴 때 !
→ 선: align-items 후: align-content 사용하면 80% 정도 맞다.
5. order로 순서 바꾸기
order 값을 바꾸면
html 순서와 상관없이 화면에 보이는 순서를 바꿀 수 있다.
