CSS Flexbox 에 대하여 정리해보았다.
Layout 개념이 정확하지 않으면 조금 난이도가 있을법한 챕터. 제법 양이 된다.

💡 단순 속성 정리글이 아닌 예시 화면들과 함께 더 잘 정리된 글은 아래 링크를 참조하자.
1분코딩 - CSS Flex

---

😎 Flexbox 기본 개념

Flexbox : 'Flexible Box module' 이라는 의미이며 CSS3 에서 등장했다.

• 가로 혹은 세로로 요소들을 정렬하기 위해 사용한다.

• 굳이 display: inline-block 처럼 사용해서 정렬을 강제하지 않아도 된다.

• 정렬하고싶은 요소들의 부모에 display: flex 로 스타일을 할당해 적용시킨다.

• 기본적으로 2차원이 아닌 1차원 공간에서의 개념이다.

🦊 MDN Link - Flexbox

---

😎 Flexbox 용어들

Flexbox 를 사용할 때 알아야 할 용어들이다.

1. flex container

• flex 정렬할 요소들을 담고있는 컨테이너이다.

• display: flex 값이 지정된 컨테이너의 일차 자식 요소가 flex 항목이 된다.

2. flex item

• flex container 내부에 담긴 정렬될 요소들을 의미한다.
  ❗️ 컨테이너와 아이템에 사용 가능한 프로퍼티(속성) 들이 나누어져있기 때문에 잘 구분하자!

• 부모자식간의 관계를 정확히 이해해야 헷갈리지 않는다.

3. main axis

• '주축' 이라고 부른다.

• 기본값은 주축이 가로(왼쪽에서 오른쪽) 로 설정된다.

4. cross axis

• '교차축' 이라고 부른다.

• 주축과 수직방향인 축을 의미한다.

• 기본값은 교차축이 세로(위에서 아래) 로 설정된다.

---

😎 display

display 속성의 정의에 대해 다시 한 번 짚어보자.

• 앞뒤 요소와의 관계, 혹은 내부 아이템들의 레이아웃을 정의하는 속성이다.

• 디스플레이를 지정하는 경우, 외부/내부 에 따라 다른 개념으로 해석된다.

1. 요소의 외부 디스플레이 유형을 설정하는 키워드 = inline, block, ...
2. 요소의 내부 디스플레이 유형을 설정하는 키워드 = flex, grid, ...

• inline-flex 처럼 결합하여 사용할수도 있다.

🦊 MDN Link - display

---

😎 flex-direction

flex-direction : flex container 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향) 을 지정한다.

• 해당 프로퍼티를 사용하면 주축을 기본 가로에서 세로로 변경할 수 있다.
  --> 당연히 방향도 변경 가능하다.

Values

1. row (기본값) = 주축이 가로방향이다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일하다.
2. row-reverse = row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치한다.
3. column = 주축이 세로방향이다. 시작점과 끝점이 글 작성 모드의 이전 지점 및 이후 지점과 동일하다.
4. column-reverse = column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치한다.

🦊 MDN Link - flex-direction

---

😎 flex-wrap

flex-wrap : flex item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 여러행으로 나누어 표현할 것인지 결정하는 속성이다.

• 배치 가능한 영역에서 벗어나지 않게 여러 행으로 나눔이 목적이다.

Values

1. nowrap (기본값) = 부모요소 영역을 벗어나더라도 flex item 요소들을 한 줄에 배치한다.
2. wrap = flex item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치된다.
3. wrap-reverse = wrap과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치된다.

🦊 MDN Link - flex-wrap

---

😎 flex-flow (단축 속성)

flex-flow : flex-direction, flex-wrap 속성의 단축 속성이다.

• direction 값과 wrap 값을 띄어쓰기(spacing) 로 구분하여 작성한다.
  ex) flex-flow: row wrap

🦊 MDN Link - flex-flow

---

😎 order

order : 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정하는 속성이다.

• 기본값은 0 이다.

• flex item 에 속성을 설정한다.

• 정렬 순서는 오름차순 order 값이다.

• 같은 값일 경우 소스 코드의 순서대로 정렬된다.

• 논리적인 순서나 탭 순서와는 전혀 상관 없이 화면에 보이는 순서에만 영향을 준다.
  --> 비시각적 매체에 적용해선 안된다!

• 직접적으로 html 문서에서 요소 순서를 변경하는 것은 아니다.

🦊 MDN Link - orer

---

😎 flex-grow

flex-grow : item 요소가 container 요소 내부에서 할당 가능한 공간의 정도를 선언한다.

• 기본값은 0 이다.

• 값은 음수를 제외한 숫자값 단독으로 표현한다.

• 컨테이너 요소 내부에 빈 공간을 줄일 때 사용한다.

• 형제 item 요소들이 동일한 flex-grow 값을 가지면
  container 요소 내부에서 동일한 공간을 할당받는다.

• 늘어난 영역을 주어진 값만큼의 비율로 item 요소들이 나눠갖는다.

• 보통의 경우 flex-shrink 와 flex-basis 속성을 함께 사용한다.

🦊 MDN Link - flex-grow

---

😎 flex-shrink

flex-shrink : flex item 요소의 flex-shrink 값을 설정한다.

• item 요소가 너무 커서 container 요소에 전부 담기지 않을 때 사용한다.

• 기본값은 1로써, 아이템 요소들의 값이 1:1 로 설정되어있다.
  --> 컨테이너 영역이 줄어들 때 같은 비율로 줄어든다.

• flex-shrink: 0; 속성을 가진 item 요소는 더이상 줄어들지 않음을 의미한다.

• 줄어든 영역을 주어진 값만큼의 비율로 item 요소들이 나눠갖는다.

• flex-grow 와 정반대로 동작한다는 개념으로 이해하자.

🦊 MDN Link - flex-shrink

---

😎 flex-basis

flex-basis : 아이템 요소의 초기 크기를 지정한다.
✅ basis 란? = 아이템이 갖고있던 기존 콘텐츠의 크기를 의미한다.

• box-sizing 을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경한다.

• 기본값은 auto 키워드이다.

• 음수값을 제외한 length 와 percentage 값, 그리고 auto 키워드를 지정할 수 있다.

• 값이 0 이면 아이템 요소들의 크기를 일정하게 맞춘다.

• 기존 콘텐츠가 차지하고 있던 영역(basis) 의 기준을 재설정한다.
  --> grow 와 shrink 로 변경되는 영역이 기존 콘텐츠 영역에 관계없이 일정한 비율을 갖는다.

🦊 MDN Link - flex-basis

---

😎 flex (단축 속성)

flex : 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.

• flex-grow, flex-shrink, flex-basis 의 단축속성이다.
  ❗️ 한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때,
  <flex-basis> 의 값은 auto 가 아니라 0이 된다!!

• 값이 한 개일 때
  1) <number> 자료형이면 flex-grow 이다.
  2) <length> 또는 <percentage> 자료형이면 flex-basis 이다.

• 값이 두 개일 때
  1) 첫 번째 값은 <number> 여야 하고, flex-grow 속성이 된다.
  2) 두 번째 값은 값이 한 개일 때와 동일하다.

• 값이 세 개일 때
  순서대로 grow, shrink, basis 속성이다.

Keyword Values

1. initial = flex: 0 1 auto 줄어들긴 하지만, 늘어나진 않는다.
2. auto = flex: 1 1 auto 줄어들기도 하고, 늘어나기도 한다.
3. none = flex: 0 0 auto 사용하지 않는 것과 같다.

🦊 MDN Link - flex

---

😎 justify-content

justify-content : 주축을 기준으로 아이템들을 정렬하는 방법에 대해 결정하는 컨테이너 속성이다.

• 주축을 기준으로 하는 속성이다. 교차축은 고려하지 않음을 기억하자!

• 왼쪽, 오른쪽 으로 접근하지 말고 주축의 시작점, 끝점 으로 이해해야 한다.

Values (align-content 공유)

1. flex-start = 주축의 시작점부터 아이템들을 정렬한다.

2. flex-end = 주축의 끝점부터 아이템들을 정렬한다.

3. center = 컨테이너의 가운데에 아이템들을 정렬한다.

4. space-between = 주축의 양 끝 아이템들은 컨테이너 끝에 붙고,
   아이템 요소들 사이에만 일정한 간격을 가진다.

5. space-around = 모든 아이템 요소들이 주축을 기준으로 일정한 간격을 가진다.

🦊 MDN Link - justify-content

---

😎 align-items

align-items : 컨테이너 내에 주축을 어느곳에 위치시킬지 결정한다.

• 더 자세하게 말하자면, 주축의 시작점을 교차축의 시작/끝/중간 등 어느곳에 위치시킬지 결정한다.

• 요소들이 한줄에 배치될 때 사용한다.

Values (align-self 공유)

1. stretch = 주축 방향으로 나열된 아이템들을 교차축 방향으로 최대한 늘린다.
2. flex-start = 교차축의 시작점에 주축을 배치한다.
3. flex-end = 교차축의 끝점에 주축을 배치한다.
4. center = 교차축의 중간지점에 주축을 배치한다.

🦊 MDN Link - align-items

---

😎 align-content

align-content : 교차축을 기준으로 아이템들을 정렬하는 방법에 대해 결정한다.

• justify-content 와 비슷하나, 이 컨테이너 속성은 교차축에 따라 배치한다.

• 위에서 다룬 align-items 와 목적이 완전히 다르므로 주의하자!

Values

• justify-content 의 Values 설명 내용에서 '주축' 이 '교차축' 으로 변경된다.

🦊 MDN Link - align-content

---

😎 align-self

align-self : 교차축을 기준으로 아이템 배치를 결정하는 아이템 속성이다.

• 아이템 요소 하나하나에 해당 속성을 지정할 수 있다.

Values

• align-items 의 Values 와 동일한 값들을 사용한다.

🦊 MDN Link - align-self