편해보이지만 막상 쓰려면 골치아프던 Flexbox!
오늘은 김버그님의 강의를 바탕으로 개념을 제대로 정리해보려한다!!😎
우선 flexbox로 대상을 정렬하고자 한다면 다음의 세 가지만 생각하자.
display : flex
를 정렬하고자 하는 자식의 부모에게 선언flex-direction : row or column
flex-wrap : nowrap or wrap
Flexbox를 사용하려면 가장 먼저 display : flex
를 선언해야한다. 이때, 정렬하고자 하는 요소를 감싼 부모에게 display를 넣어야 한다!
-> 어디에 넣어야할지 잘 몰라서 한 줄 적고 실행하고를 반복했었다...정렬 대상의 부모
외웁시다!!
정렬하려는 방향을 정해야한다. 가로는 row
로 세로는 column
이라 생각하면 된다. 방향을 정하고나면 두개의 축이 만들어지는데, flex-direction 방향에서 시작하는 main axis
와 그에 대한 수직으로 흐르는 cross axis
가 바로 그 두 축이다.
-> 여태 플박을 제대로 활용하지못했던 이유!! 두 축을 단순히 가로,세로의 개념처럼 생각하고있었다.
-> 페이지 구상 시에 박스 개념을 토대로 flex 방향을 먼저 적어두는 것도 좋을 것 같다.
nowrap
과wrap
이제 정렬을 위한 준비가 모두 끝났다!
마음껏 정렬을 할 수 있지만,,! 몇 가지 개념 정리가 더 필요하다..!
이를 위해 앞에서 잠깐 나왔던 axis
(축)에 대한 개념을 꼭 숙지해야한다.
👻main축과 cross축은 절대 가로, 세로의 개념이 아닙니다!!👻
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
: 축의 한 가운데 정렬 123 --> 321
이런 느낌~+김버그님의 tip
선 align-items 후 align-content
-> 먼저 items으로 정렬을 시도하다가 잘 안 된다면,,! content로 해보는 것도 한 방법이다!