Flex를 아주 쉽게 설명한 좋은 글
- https://studiomeal.com/archives/197

Flexbox

1차원 레이아웃 모델.
아이템 간 공간 배분과 정렬 기능을 제공한다.
display: flex; 를 통해 컨테이너를 flex container로 만들 수 있다.

기본적으로 flex container는 내부 속성들의 margin 값을 무시하고 행 방향 (수평)으로 정렬한다.

Flexbox의 축

주 축(main-axis)와 교차축(cross-axis)이 있다.
수평 축을 주 축이라고 지정한 경우 수직 축이 교차 축이 되는 식이다.

flex-direction

flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

주축 2가지 x 방향 2가지 -> 총 4가지 속성이 기본적으로 존재한다.

flexbox 다루기

• 주축 배치 방법 : justify-content
• 교차축 배치 방법 : align-items
• 교차축 개별요소 배치 방법 : align-self
• 줄 바꿈 여부 : flex-wrap

vh

레이아웃에 상관 없이 윈도우 기준으로의 height

80vh라고 하면 윈도우 전체의 80% height를 의미한다.

container에 적용되는 속성

display

flexbox적용을 위해서는 아래처럼 display 옵션을 flex로 주면 된다.

display: flex;

flex-direction

중심 축을 설정하는 property
reverse는 완전히 반대방향 (아이템의 순서도 바뀜)

flex-direction: column
flex-direction: row
flex-direction: row-reverse

flex-wrap

wrap이란 건 아이템이 한 줄에 꽉 차게 되면 자동으로 다음 라인으로 넘어가는 옵션을 말함.
기본 값은 flex-wrap: nowrap
즉 아무리 공간이 줄어들더라도 아이템 크기를 줄이지 아이템이 내려가게 하지는 않음. (기본값)

flex-wrap: wrap;

flex-flow

flex-direction과 flex-wrap을 합한 것

flex-flow: column wrap;

justify-content

중심 축에서 아이템들을 어떻게 배치할 것인지에 관한 옵션

flex-end의 경우 축의 방향 쪽 정렬
flex-start의 경우 축의 반대방향 쪽 정렬 이라고 생각하면 된다.

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around; // space-evenly, space-between

align-items

반대 축에서 아이템들을 어떻게 배치할 것인지에 관한 옵션

align-items

align-items와 비슷하지만, 플렉스 요소가 아닌 플렉스 라인을 정렬하는 옵션.

---

item에 적용되는 속성

order

item들의 순서를 직접 지정할 수 있는 옵션. (거의 쓰지 않음)

order: 0;
order: 1;

flex-grow

item이 container의 크기가 늘어나면 container를 꽉 채우기 위해 본래의 크기보다 늘어나는 옵션
값은 비율로 생각할 수 있음.

flex-grow: 1;

flex-shrink

flex-grow와 반대로 줄어들 때 어떤 비율로 줄어들 것인가 하는 옵션.

flex-shrink: 1;

flex-basis

flex-grow, flex-shrink보다 좀 더 세부적으로 지정할 수 있는 옵션.
컨테이너가 커질 때도, 작아질 때도 비율을 유지한다.

flex-basis: 60%;

align-self

컨테이너 지정 옵션을 벗어나서 아이템 하나만 배치하고 싶을 때 쓰는 옵션.

align-self: center;