FlexBox란?

🔸Flexible Box Layout

• 행과 열 형태로 항목 무리를 배치하는 1차원 레이아웃 메서드
• 컨테이너 부모가 필요하고 그 안에 아이템이 하나 이상이 있을 때 flex 사용할 수 있다.

---

구성 요소, 용어

✅ flex container :

부모 요소

✅ flex item :

자식 요소, 정렬이 필요한 각각의 아이템을 담아 놓는 곳

main axis : 가로 왼쪽에서 오른쪽이 기본값, 주축

cross axis : 세로 위에서 아래로 기본값, 교차축

---

Flex Container 속성

🔸 display: flex

• Flex 컨테이너에 display: flex;를 적용하는게 시작
• Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 됨. 마치 inline 요소과 같다. height는 컨테이너의 높이만큼 늘어남.

🔸 flex–direction

• 컨테이너 내의 아이템을 배치할 때 사용. 사용 할 주축 및 방향 설정 가능
• 주축의 위치 - 수평, 수직
• 주축의 방향 - 정방향, 역방향

  값 (value)

  • row : 기본 값. 주축의 시작점과 끝점이 콘텐츠 방향과 동일
  • row-reverse : row와 동일하게 동작하지만 주축의 시작점과 끝점이 반대에 위치
  • column : 세로로 정렬 되는 block축과 동일. 주축의 왼쪽 위에서 아래로
  • column : 수직인데 방향이 주축의 왼쪽 아래에서 위로

🔸 flex–wrap

• item 자신의 원래 크기를 잃지 않게 래핑하는 개념.
• flex-item 요소들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지를 결정하는 속성
• 즉, 자신의 width값을 변경하지 않고 자동으로 여러행으로 나누어지게

  값 (value)

  • nowrap : 기본값. 무조건 한 줄에 배치. 시작점은 flex-direction을 따름
  • wrap : 여러행으로 걸쳐서 배치. 시작점은 flex-direction을 따름
  • wrap-reverse : wrap 속성과 동일. 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치

🔸 flex-flow (shorthand)

• flex–direction, flex–wrap 두 가지를 합쳐서 씀. 스페이싱으로 구분

🔸 justify-content

• 주축을 기준으로 아이템들을 어떻게 정렬할 지에 대한 속성

  값 (value)

  • MDN Web Docs

🔸 align-items

• 기본 값 : stretch
• 한 줄로 정렬되어있는 아이템들을 교차축에 어느 위치로 할 것인지 정렬할 것인지
• 자식이 height 값이 없으면 부모 길이 만큼 쭉 늘어남

  값 (value)

  • MDN Web Docs

🔸 align-content

• 여러 줄에 대한 교차축의 정렬

  값 (value)

  • MDN Web Docs

---

Flex Item 속성

🔸 order

• 기본값 : 0
• flex, grid 컨테이너 안에서 현재 요소의 배치 순서를 지정
• HTML 건드리지 않고 CSS만으로 순서 바꿀 수 있는
• 값은 정수 사용.
• 기본으로는 다 0이고 코드 순서대로 따름

🔸 flex-grow

• 기본값 : 0
• 할당이 가능한 수용 가능한 공간이 남는다면 아이템들끼리 나눠서 사용할 수 있다.
• 1이라면 1대 1의 비율(늘어나는 영역)로 나눠 갖는다
• flex-wrap을 컨테이너에서 지정하게 되면 떨어지는 아이템들도 유연하게 크기가 변경되어 채운다
• number 사용해서 음수 값은 사용 안되고 소수 가능

🔸 flex-shrink

• 기본값 : 1
• flex-grow와 같은 원리지만 반대되는 개념
• flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 이 속성을 사용
• 컨테이너 크기가 줄어들면 똑같이 1대1의 비율로 줄어든다
• 만약에 0으로 지정하면 본인 크기를 지키고 있다

🔸 flex-basis

• 기본값 : auto
• flex 아이템의 초기 크기 지정.
• 이걸 지정하지 않는다면 요소 자체의 원래의 width 값을 갖게 된다
• 이걸 지정한다면 늘어나고 줄어드는 영역을 제어할 수 있다
• 사용할 수 있는 값은 width 단위 값, 퍼센트도 가능

🔸 Item - flex (shorthand)

• flex-grow, flex-shrink, flex-basis 이 세 가지의 단축 속성
• 값을 지정하지 않으면 grow, shrink는 초기 값으로 설정이 되는데 basis는 아니다.
• 한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, flex-basis값은 auto가 아니라 0이 된다

📍 사용 방법

• 값이 한 개

  • number를 지정하면 flex-grow
  • lenght, %를 지정하면 flex-basis

• 값이 두 개, 첫 번째 값은 number 여야 하며 flex-grow가 된다. 두 번째 값은 다음 중 하나여야 함

  • number를 지정하면 flex-shrink
  • length, 퍼센트 또는 auto를 지정하면 flex-basis

• 값이 세 개

  • flex-grow에 사용할 number
  • flex-shrink에 사용할 number
  • flex-basis에 사용할 length, 퍼센트, 또는 auto

📍 다른 값도 가능

• initial
  • 아이템 크기가 각각의 width와 height 속성에 따라 정해짐.
  • flex: 0 1 auto와 동일
• auto
  • 아이템 크기가 각각의 width와 height 속성에 따라 정해짐.
  • flex: 1 1 auto와 동일
• none
  • 아이템 크기가 각각의 width와 height 속성에 따라 정해짐.
  • flex: 0 0 auto와 동일

🔸 align-self

• 한 가지 아이템만 따로 스타일링 주고 싶을 때

  값 (value)

  • MDN Web Docs

---

(참고 사이트)
1분 코딩
MDN Web Docs