편해보이지만 막상 쓰려면 골치아프던 Flexbox!
오늘은 김버그님의 강의를 바탕으로 개념을 제대로 정리해보려한다!!😎
Preparing for flexbox
우선 flexbox로 대상을 정렬하고자 한다면 다음의 세 가지만 생각하자.
-
display : flex를 정렬하고자 하는 자식의 부모에게 선언 - 정렬하고자하는 방향 정하기 :
flex-direction : row or column - 한 줄에 넣을지 정하기 :
flex-wrap : nowrap or wrap
1. display: flexbox 설정
Flexbox를 사용하려면 가장 먼저 display : flex를 선언해야한다. 이때, 정렬하고자 하는 요소를 감싼 부모에게 display를 넣어야 한다!
-> 어디에 넣어야할지 잘 몰라서 한 줄 적고 실행하고를 반복했었다...정렬 대상의 부모 외웁시다!!
2. 가로 또는 세로?!
정렬하려는 방향을 정해야한다. 가로는 row로 세로는 column이라 생각하면 된다. 방향을 정하고나면 두개의 축이 만들어지는데, flex-direction 방향에서 시작하는 main axis와 그에 대한 수직으로 흐르는 cross axis가 바로 그 두 축이다.
-> 여태 플박을 제대로 활용하지못했던 이유!! 두 축을 단순히 가로,세로의 개념처럼 생각하고있었다.
-> 페이지 구상 시에 박스 개념을 토대로 flex 방향을 먼저 적어두는 것도 좋을 것 같다.
3. flex-wrap
- 자식의 사이즈를 줄여서 한 줄로 정렬하는
nowrap과 - 사이즈를 유지하여 여러 줄을 만든다는
wrap
-> 감싼다는 표현이 잘 와닿지 않았는데, no-wrap! no-mercy!로 생각해보려한다ㅎ_ㅎ (child의 size 따위는 가볍게 무시하는 느낌에서 하핳)
이제 정렬을 위한 준비가 모두 끝났다!
마음껏 정렬을 할 수 있지만,,! 몇 가지 개념 정리가 더 필요하다..!
이를 위해 앞에서 잠깐 나왔던 axis(축)에 대한 개념을 꼭 숙지해야한다.
👻main축과 cross축은 절대 가로, 세로의 개념이 아닙니다!!👻
- flex-direction 에 따라(즉 row 또는 column에 따라),
main axis과cross axis는 좌우 또는 상하로 바뀔 수 있다.
- 두 축들이 시작점이 있다는 것을 기억해야한다.
->flex start,flex-end에서 시작점의 존재를 확인할 수 있는데,align-items과align-contents를 비교하면 축 방향의 시작점이 더 잘보인다!
정렬하기
정렬은 크게 두 가지 기준으로 나눌 수 있다. main axis를 기준으로 하는 justify-content와 cross axis를 기준으로 하는 align-items 또는 align-content.
그리고 원하는 대상을 정렬하는 방법은,
flex-start, flex-end, space-between, center, space-around로 다양하다.
flex-start: 시작점으로부터 정렬flex-end: 끝점으로부터 정렬space-between: 대상 사이에 여백이 생기는 정렬space-around: 대상을 감싸는 여백이 생기는 정렬center: 축의 한 가운데 정렬
-> between은 양끝에 margin이 생기지 않고, around는 각 객체마다 margin이 생기기에 객체 사이의 여백이 양 끝의 2배 임을 명심하자!
1. justify-content : MAIN을 기준으로
- ex_1) direction이 row일때, flex-start는 왼쪽 정렬
- ex_2) row-reverse 일땐, flex-start는 오른쪽 정렬
-> 시작점이 오른쪽으로 변경되어 오른쪽 정렬이자 동시에 거꾸로 됨
123 --> 321이런 느낌~ - ex_3) column 일때는 기둥이 움직인다는 느낌으로 생각하기!
2. align-items or align-contents : CROSS를 기준으로
- align-items가 (wrap을 해서 생긴 여러 축들 중)각각의 축을 기준으로 정렬이 된다면 , align-contents는 전체의 큰 축을 기준으로 정렬된다.
+김버그님의 tip
선 align-items 후 align-content
-> 먼저 items으로 정렬을 시도하다가 잘 안 된다면,,! content로 해보는 것도 한 방법이다!
순서정하기
order
- 속성으로 대상의 위치를 쉽게 수정할 수 있다!
