플랙스 박스(Flex Box)란?

• 행(Row) 또는 열(Column) 중 하나의 방향을 기준으로 요소를 배치하는 1차원 레이아웃 모델
• 상위 부모 요소인 flex container와 배치하고 싶은 HTML 요소인 flex item로 구성
  • 부모 (Flex Container) display: flex가 선언된 요소로 내부 아이템들을 어떻게 배치할지 결정
  • 자식 (Flex Item) 컨테이너 내부의 직계 자식 요소들로 스스로의 크기나 정렬 방식을 결정
• **두 개의 축 (Axes)**을 기준으로 정렬
  • 주축 (Main Axis) flex-direction에 의해 결정되는 기본 배치 방향
  • 교차축 (Cross Axis) 주축과 수직을 이루는 방향

부모 요소(Flex Container) 속성

flex-direction (주축 방향) : 아이템이 나열될 주축과 방향을 정하는 속성

flex-wrap (줄 바꿈 여부) : 항목의 줄을 바꿀지 여부를 지정

flex-flow : flex-direction과 flex-wrap을 한번에 지정

justify-content (주축 정렬) : 주축 기준으로 아이템 정렬 방법을 정하는 속성

align-items (교차축 정렬 - 단일 라인) : 한 줄 내에서 아이템들을 세로(교차축) 정렬 방법을 정하는 속성

align-content (교차축 정렬 - 여러 라인) : flex-wrap: wrap 상태에서 줄(Line)이 여러 개일 때, 그 줄들 사이의 간격을 조절

gap : 아이템 사이의 간격을 설정

Flex Item (자식 요소) 속성

flex-basis (기본 크기) : 아이템의 기본 크기를 설정

flex-grow (팽창 지수) : 빈 공간이 생겼을 때 얼마나 더 커질지 결정

flex-shrink (수축 지수) : 공간이 부족할 때 얼마나 더 줄어들지 결정

flex (단축 속성) : grow, shrink, basis를 한 번에 작성 (실무 권장)

align-self : 특정 아이템 하나만 정렬