플렉스

플렉스박스 구성 요소

• 주축(main axis): 플렉스 박스의 진행 방향과 수평한 축을 말합니다.
• 교차축(cross axis): 주축과 수직한 축을 말합니다.
• 플렉스 컨테이너(flex container): display 속성값으로 flex나 inline-flex가 적용된 요소를 말합니다.
• 플렉스 아이템(flex item): 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소를 말합니다.

플렉스 기본 속성

display 속성

display 속성은 요소가 웹 페이지에서 어떻게 배치될지를 정의하는 속성입니다. flex 레이아웃을 사용하려면 display: flex를 사용합니다.

• block: 요소가 블록 레벨 요소처럼 동작하며, 줄바꿈이 일어납니다.
• inline: 요소가 인라인 요소처럼 동작하며, 줄바꿈이 일어나지 않습니다.
• inline-block: 요소는 인라인 요소처럼 줄바꿈 없이 배치되지만, 블록 요소처럼 크기를 조절할 수 있습니다.
• flex: 요소를 플렉스 컨테이너로 만들고, 자식 요소들을 플렉스 아이템으로 배치합니다.
• none: 요소가 렌더링되지 않습니다.

.container {
  display: flex;
}

flex-direction 속성

flex-direction 속성은 플렉스 컨테이너 안의 아이템들이 어떤 축을 기준으로 정렬될지 결정합니다. 기본적으로 가로 방향(row)으로 정렬되지만, 세로 방향으로도 설정할 수 있습니다.

• row: 주 축을 가로로 설정하여, 왼쪽에서 오른쪽으로 아이템을 배치.
• row-reverse: 주 축을 가로로 설정하되, 오른쪽에서 왼쪽으로 아이템을 배치.
• column: 주 축을 세로로 설정하여, 위에서 아래로 아이템을 배치.
• column-reverse: 주 축을 세로로 설정하되, 아래에서 위로 아이템을 배치.

.container {
  display: flex;
  flex-direction: column;
}

flex-wrap 속성

flex-wrap 속성은 플렉스 컨테이너 안의 아이템이 한 줄에 모두 배치될지, 아니면 여러 줄에 걸쳐서 배치될지를 설정합니다. 기본적으로는 한 줄에 모두 배치되지만, 필요에 따라 줄바꿈을 할 수 있습니다.

• nowrap: 기본값으로, 모든 아이템을 한 줄에 배치합니다.
• wrap: 아이템을 여러 줄로 나누어 배치하며, 행이 꽉 차면 다음 줄로 넘어갑니다.
• wrap-reverse: 여러 줄로 나누어 배치하되, 줄바꿈 방향이 반대입니다.

.container {
  display: flex;
  flex-wrap: wrap;
}

flex-flow 속성

flex-flow 속성은 flex-direction과 flex-wrap 속성을 한 번에 설정할 수 있는 단축 속성입니다.

.container {
  display: flex;
  flex-flow: row wrap;
}

플렉스 정렬 속성

justify-content 속성

justify-content 속성은 플렉스 컨테이너 안에서 주 축(메인 축)을 기준으로 아이템들이 어떻게 정렬될지를 결정합니다. flex-direction에 따라 주 축이 달라지므로, 가로 또는 세로 방향에서의 정렬을 의미할 수 있습니다.

• flex-start: 아이템을 주 축의 시작점에 정렬.
• flex-end: 아이템을 주 축의 끝점에 정렬.
• center: 아이템을 주 축의 중앙에 정렬.
• space-between: 아이템 사이에 고른 간격을 두고, 첫 번째와 마지막 아이템은 양 끝에 배치.
• space-around: 아이템 사이에 고른 간격을 두되, 아이템의 양 끝에 절반 간격을 추가.
• space-evenly: 모든 아이템 사이에 동일한 간격을 적용.

.container {
  display: flex;
  justify-content: center;
}

align-items 속성

align-items 속성은 플렉스 컨테이너 안에서 교차 축(크로스 축)을 기준으로 아이템들이 어떻게 정렬될지를 결정합니다. 플렉스 컨테이너의 높이나 너비에 따라 수직 또는 수평으로 정렬됩니다.

• stretch: 아이템을 교차 축을 따라 늘리며, 기본값으로 사용됩니다.
• flex-start: 아이템을 교차 축의 시작점에 정렬.
• flex-end: 아이템을 교차 축의 끝점에 정렬.
• center: 아이템을 교차 축의 중앙에 정렬.
• baseline: 아이템을 텍스트의 기준선에 맞춰 정렬.

.container {
  display: flex;
  align-items: flex-start;
}

align-content 속성

align-content 속성은 여러 줄로 아이템이 배치된 경우, 즉 플렉스 랩핑이 발생할 때, 플렉스 컨테이너 내에서 각 줄 간의 간격을 교차 축(크로스 축) 기준으로 어떻게 정렬할지 결정합니다. 아이템이 한 줄일 때는 적용되지 않습니다.

• stretch: 줄들을 교차 축을 따라 늘립니다. 기본값.
• flex-start: 줄들을 교차 축의 시작점에 정렬.
• flex-end: 줄들을 교차 축의 끝점에 정렬.
• center: 줄들을 교차 축의 중앙에 정렬.
• space-between: 줄 사이에 고른 간격을 두고, 첫 번째 줄과 마지막 줄은 양 끝에 배치.
• space-around: 줄 사이에 고른 간격을 두되, 줄의 양 끝에 절반 간격을 추가.
• space-evenly: 줄들 사이에 동일한 간격을 적용.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

align-self 속성

align-self 속성은 개별 플렉스 아이템에 적용되어, 특정 아이템만 교차 축(크로스 축)에서 다르게 정렬할 수 있게 합니다. align-items와 동일한 값들을 가지며, 개별 아이템에만 적용된다는 차이점이 있습니다.

• auto: 부모의 align-items 값이 적용됩니다. 기본값.
• stretch: 아이템을 교차 축을 따라 늘립니다.
• flex-start: 아이템을 교차 축의 시작점에 정렬.
• flex-end: 아이템을 교차 축의 끝점에 정렬.
• center: 아이템을 교차 축의 중앙에 정렬.
• baseline: 아이템을 텍스트의 기준선에 맞춰 정렬.

.item {
  align-self: center;
}