• Flex는 수평이 될 요소들의 Container에 diplay: flex;를 적용한다.
• flex는 2가지로 나뉜다. item들을 담는 container와 정렬하고 싶은 item.
• item을 정렬하기 위해서는 container가 필수다.

Flex Container

• flex container는 주축(main-axis)와 교차축(cross-axis)가 있다.

display

• display속성으로 flex container정의한다. 보통은 display:block, inline-block, none을 많이사용.
• display:flex, display:inline-flex 중에 쓴다.
• flex : block요소와 같은 성향(수직 쌓임)을 가진다.
• inline-flex : inline(inline block)같은 수평쌓임을 가진다.

flex-direction

• items의 주축을 설정한다.

주축(main-axis)과 교차축(cross-axis)

• flex-direction값이 row면 주축을 따라 가로로 요소들이 배치된다. column이면 세로로 쌓인다.
• 주축과 교차축의 시작점과 끝점을 의미하는 flext-start, flex-end의 개념도 있다.

flex-wrap

• items의 여러 줄 묶음(줄 바꿈)을 설정한다.

|값|의미|기본값| |-|-|-| |nowrap|모든 items를 여러줄로 묶지 않고 한줄로표시|nowrap |wrap|items를 여러줄로 묶음| |wrap-reverse|items를 wrap의 역방향으로 여러줄로 묶음

flex-wrap: 여러줄로묶음;

• 기본적으로 items는 한줄에서만 표시된다. width, height를 무시하고 한줄에서 가변한다.
• wrap을 통해 items를 줄바꿈한다.

justify-content

• 주축의 정렬방법 설정

  justify-content: 정렬방법;
  

  |값|의미|기본값| |-|-|-| |flex-start|items를 시작점(flex-start)으로 정렬|flex-start| |flex-end|items를 끝점으로 정렬| |center|가운데 정렬| |space-between|시작은 item은 시작점에 마지막은 끝점에 나머지는 고르게 정렬됨| |space-around|items를 균등한 여백을 포함하여 정렬|

align-content

• 교차축의 정렬방법을 설정
• flex-wrap을 통해 items가 여러줄이고 여백이 있을때만 사용가능.

  align-center: 정렬방법
  

  |값|의미|기본값| |-|-|-| |stretch|container의 교차축을 채우기 위해 items를 늘림|stretch| |flex-start|시작점으로 정렬| |flex-end|끝점으로 정렬| |center|가운데정렬| |space-between|시작은 item은 시작점에 마지막은 끝점에 나머지는 고르게 정렬됨| |space-around|items를 균등한 여백을 포함하여 정렬|

align-items

• 교차축에서 items의 정렬을 설정, items가 한줄인 경우 많이 사용
• items가 flex-wrap을 통해 2줄이상이면 align-content가 우선적용
• align-items를 사용하려면 align-content를 기본값으로 설정해야한다.

  align-items: 정렬방법;
  

  |값|의미|기본값| |-|-|-| |stretch|container의 교차축을 채우기 위해 items를 늘림|stretch| |flex-start|시작점으로 정렬| |flex-end|끝점으로 정렬| |center|가운데정렬| |baseline|item을 문자 기준선에 정렬|