Flexbox

2018년 아르바이트하던 카페 근처 서점에서 이 책을 발견했다.
이제 막 HTML, CSS를 책 한권으로 끝내고 어떤 걸 더 알아야할지 잘 모르던 때였다. 기회만 되면 서점에 가서 웹 개발코너 책 구경을 했다. 마침 아주 얇은 이 책에서 grid와 flexbox layout을 알게 되었다.

책을 다 읽고나서 어렵다고 느꼈다. 이런게 있구나 의 상태로 머무르기로 했다.
헤더의 네비게이션 메뉴나 상점 아이템같은 레이아웃을 퍼블리싱할 때마다 더 많은 설정을 하는 것이 귀찮아도 inline-box를 사용했다. 왜냐면 flex는 너무 어렵고 복잡해보이는 속성이었다.

퍼블리셔로 첫 취업 후 깨달았다. 생각보다 훨씬 많은 요소들을 inline-box로 디자인해야했고,
나는 더 쉽고 좋은 무기들을 알아야 할 필요를 느꼈다.

부모에게 display: flex를 적용하자.

/* flex container 라고 설정한 부모 요소에게 적용한다 */
<부모 요소>
	<자식 요소></자식 요소>
  <자식 요소></자식 요소>
  <자식 요소></자식 요소>
  ...
</부모 요소>

block요소를 가로로 배치하고 싶다면 flex를 사용해야한다.
부모 요소에게 display: flex속성 값으로 flex container그룹을 설정하여 아래 자식들을 나란히 배치시킬 수 있다.

부모 요소에게는 height 값이 있어야 후술할 Cross Axis의 정렬이 가능하다.

두 종류의 Axis (Main, Cross)

flex-direction의 값에는 중심 방향(Main) 과 교차 방향(Cross) 이 존재하는데, 각 값의 방향들은 아래와 같다.

그래서 flex-direction을 기준으로 중심 방향인 Main Axis과 교차 방향인 Cross Axis에 따라 설정하는 속성이 지정되어있다. 변경하고 싶은 정렬을 설정할 때 아래의 속성을 인지하면 너무나 편리하게 사용할 수 있다. 이것만 알고 이해해도 사용하는데 큰 도움이 된다.

flex-wrap과 align-content

flex가 사용된 부모는 자식의 너비값을 무시하고 한 줄로 나란히 꾸깃꾸깃 세워버린다. 자식의 너비값을 유지하면서 부모의 너비를 넘어서면 다음 줄로 세우려면 flex-wrap을 사용한다. 이 때 생기는 wrap사이 간격을 조정하는데 필요한 속성이 align-content 이다.

특별한 자식에게 align-self

자식들 중 특정 자식의 배치를 해당 자식에게만 변경하고 싶을때 설정한다.

부모가 아닌 변경할 해당 자식요소에게 align-self 속성을 쥐어준다.

참고자료

A Complete Guide to Flexbox
CSS 플렉스박스(flex) flex-grow와 flex-shrink 속성의 완벽 이해
이번에야말로 CSS Flex를 익혀보자
🕹 FLEXBOX FROGGY 게임