🔴 flex-container에 사용하는 속성

• display:flex
• 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법입니다
• 부모 요소를 flex-container 자식 요소를 flex-item 이라고 부릅니다.
• 1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용합니다.
  list-style: none으로 ul 점들을 없엤고,
  
  display: felx;를 입력했더니 움츠러든 모습
  이렇게 입력하면 부모는 flex-container, 자식은 flex-item 요소로 정해진다.

flex-direction

• 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정합니다.
• row : 기본값. 왼쪽에서 오른쪽 (자식들을 행 방향으로 정렬)
• column: 위에서 아래 방향 (자식들을 열 방향으로 정렬)
• row-reverse: 오른쪽에서 왼쪽
• column-reverse: 아래에서 위 방향

justify-content

• 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있습니다.
• flex-start, flex-end, center, space-between, space-around, space-evenly
  

주어진 코드를 가지고 flex 속성을 추가해 아래와 같은 이미지로 배치해 보자!

align-items, align-content

• align-items: 교차 축을 기준으로 정렬합니다.
• align-content: 컨테이너의 교차 축의 아이템들이 여러 줄일때 사용 가능합니다.
  • flex-wrap:wrap 인 상태에서 사용해야 합니다.

파란 상자를 이미지와 같이 위치시켜보세요

• 정답

  /* 추가 */
  .wrap{
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
  }

gap

• 아이템 사이의 간격을 설정할 때 사용 할 수 있는 속성입니다.

gap: 10px;

flex-wrap

• 한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정합니다.

flex-flow

• flex-direction flex-wrap 단축속성

  flex-flow: row wrap;

---

🟠flex-item에 사용하는 속성

flex-basis

• flex-item의 초기 크기를 설정합니다.
• width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 것입니다.
• auto 기본값
• flex-basis 값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시됩니다.

💡 기본적으로 px이나 em 등의 단위값을 사용하며, 0외에 다른 상숫값을 사용할 수 없습니다.

flex-grow

• 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정합니다.
• 형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받습니다.
• 값을 0을 줄 경우 늘어나지 않습니다.
• flex-grow  : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받습니다.
• flex-grow  : 2(2이상의 수) →  특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배(배수로)의 여백 공간을 할당받습니다. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라집니다.

💡 `flex-basis:0`을 주게 되면 **여백 공간**이 아니라 **전체 공간**을 분할합니다.

flex-shrink

• 아이템의 크기를 고정하거나 축소할 때 사용합니다.
• 값을 0을 줄 경우 줄어들지 않습니다.

align-self

• 부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여합니다.
  • 기본값 stretch

flex

• 단축속성
• flex-grow flex-shrink flex-basis

  flex: 1 1 100px;

---

참고 링크

Flexbox | MDN

Flexbox Froggy

flexngrid