✏️ [ CSS ] - 1. Flex

Flex와 Grid는 레이아웃을 다루는데 있어서 주요한 도구로,

• Flex는 1차원(축이 하나인) 레이아웃을 다루며,
• Grid는 2차원(축이 두 개인) 레이아웃을 다룹니다.

오늘 강의의 주제인 Flex 에 대해 알아보겠습니다.

Flex Box

💡 Flex Box를 사용하여 요소들을 수평 정렬할 때,

• 감싸는 부모 요소를 "컨테이너(Container)"라고 하고,
• 각각의 정렬되는 요소를 "아이템(Item)"이라고 합니다.

구조 및 속성

1. 주축 및 교차축

   • 주축 (main-axis) 및 교차축 (cross-axis): Flexbox의 기본 구조를 이해하는 데 중요합니다.

2. 시작점과 끝점

   • 주축의 시작점 (main-start): 요소들이 배치되는 시작점입니다.
   • 주축의 끝점 (main-end): 요소들이 배치되는 끝점입니다.

3. 교차축의 시작점과 끝점

   • 교차축의 시작점 (cross-start): 교차축에서 요소들이 배치되는 시작 위치입니다.
   • 교차축의 끝점 (cross-end): 교차축에서 요소들이 배치되는 끝 위치입니다.

Flex Container (부모 요소)

💡 Flex Container는 다양한 속성을 통해 내부 아이템들을 조절하고 정렬합니다.

속성

1. display:

   • flex: 블록(block) 특성을 가집니다.
   • inline-flex: 글자를 왼쪽에서 오른쪽으로 정렬하고 안쪽은 블록으로 취급합니다.
   • 참고: border-color의 기본 색은 글자 색상의 영향을 받습니다.

2. flex-direction:

   • row: 기본값으로, 요소들을 수평으로 배치합니다.
   • column: 요소들을 수직으로 배치합니다.
   • row-reverse: 요소들을 수평으로 역순으로 배치합니다.
   • column-reverse: 요소들을 수직으로 역순으로 배치합니다.

3. flex-wrap:

   • 줄 바꿈과 비슷한 개념으로, wrap, wrap-reverse 등으로 설정 가능합니다.

4. justify-content:

   • 주 축에 대한 정렬 방법을 설정합니다.
   • start, end, center, space-around, space-between, space-evenly 등이 있습니다.

5. align-content:

   • 교차 축에 대한 정렬 방법을 설정하며, 2줄 이상인 경우에 사용합니다.
   • flex-start, flex-end, center, space-around 등이 있습니다.

6. align-items:

   • 한 줄일 때 교차 축에 대한 정렬 방법을 설정합니다.
   • stretch, flex-start, flex-end, center, baseline 등이 있습니다.
   • 참고: 기본값은 stretch입니다

Flex Items (자식 요소)

속성

• order: 값이 늘어날수록 아이템이 뒤로 이동합니다.

• flex: flex-grow, flex-shrink, flex-basis의 단축 속성입니다.

  • flex-grow:

    • item의 증가 너비 비율을 설정하며, 기본값은 0입니다.
    • 기본 요소의 크기를 제외한 나머지 영역을 비율로 쪼갭니다.
    • 참고: flex item의 가로 넓이는 최대한 줄어들도록 하는데, 이는 flex-grow의 기본값이 0이기 때문입니다.

  • flex-shrink:

    • item의 감소 너비 비율을 설정합니다. 기본값은 1로, 숫자가 클수록 더 많은 너비가 감소합니다.
    • 1은 감소할 수 있음을, 0은 감소할 수 없음을 의미하며, 이를 통해 쉽게 설정할 수 있습니다.

  • flex-basis:

    • 기본값은 auto로 자동으로 지정되며, width의 영향을 받습니다.
    • flex item이 가져야할 기본적인 넓이를 설정합니다.
    • 참고: flex: 1;은 1(grow) 1(shrink) 0(basis)가 되어버리기 때문에, 단축속성을 사용할 때는 주의가 필요합니다. 정확한 비율을 사용하고자 할 때는 flex-basis의 기본값이 달라지기 때문입니다.

• align-self:

  • 부모 요소에서 설정한 align-items 속성을 무시하고 개별 item에 대해 정렬 방법을 설정합니다.
  • stretch, flex 등 다양한 값을 가질 수 있습니다.

💡 CSS에서 `auto` 값은 브라우저에게 자동으로 처리를 맡기는 것과 같습니다. 

Flex에서의 주축(main-axis)과 교차축(cross-axis)를 이해하고, 각 속성들을 활용하여 레이아웃을 유연하게 다룰 수 있습니다. Flex 속성들의 기본값과 각 속성이 주는 영향을 명확하게 파악하면, 효과적인 레이아웃을 구성할 수 있습니다.

📍[출처] 박영웅 강사님의 CSS:Flex 실시간 강의 및 블로그: https://www.heropy.dev/p/Ha29GI