[CSS] Flex 정리

📘 Flex

• flex는 float와 하는 역할이 상이하다. 즉, 요소들의 정렬을 한다.
• 하지만 float와는 상상도 할 수 없게 편리하고 간단하다.

Flex 사용법

1. 선언

• flex는 정렬할 본인 요소가 아닌 정렬하고 싶은 요소들의 부모에게 설정한다.

display: flex;

2. 방향 정하기

• display 값이 flex로 정해지면 axis(축)이 2개 생긴다.
• axis에는 main axis, cross axis 2개가 있고 이를 통해 여러 property를 사용하기 때문에 방향을 정함으로써 누가 main이고 cross인지를 정해준다.

flex-direction: row || column;

• row인 경우 main axis가 x축, cross axis가 y축에 해당된다. (가로, 세로)
• column인 경우 main axis가 y축, cross axis가 x축에 해당된다.

3. block? inline?

• 제목이 이상하긴 한데, 부모 요소에 flex를 설정하기 때문에 모든 자식 요소를 한 줄에 넣을 것인지, 부모의 width값에 맞춰 적당히 줄 맞출것인지를 정한다.

flex-wrap: nowrap || wrap;

• nowrap은 어떻게든 한 줄에 모든 자식 요소를 넣겠다는 의미로 자식 요소의 width 또는 height가 변화할 수 있다.
• wrap은 다음 줄로 내려보낼 수 있다. (flex line이 두개 생겨버림)

4. 정렬하기

• 각각 row 또는 column의 방향으로 자식 요소들을 정렬 한다. 하지만 어떻게 정렬하는데에 대한 문제가 발생한다. 어디를 기준으로, 어떻게 정렬하는가?
• justify-content : main axis가 축이 되어 정렬한다.
  • flex-start, flex-end, center, space-beetween, space-around
• align-items : cross axis가 축이 되어 정렬한다.
  • center, flex-start, flex-end
• align-content : wrap을 통해 생겨버린 여러개의 flex line을 무시하고 flex line을 전체 하나로 보고 정렬한다.

reference

• https://edu.goorm.io/learn/lecture/17829/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4-%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EC%8B%A4%EB%AC%B4-%EB%A0%88%EB%B2%A8%EA%B9%8C%EC%A7%80