[CSS 핵심강좌] 5. Flexbox

CSS Flexbox는 요소들을 일차원적인 열 또는 행으로 배치하고, 공간을 쉽게 조절할 수 있는 레이아웃 기법입니다. 이 강좌에서는 Flexbox의 기본 개념과 사용 방법에 대해 알아보겠습니다.

 

 

Flex 컨테이너

Flexbox를 사용하려면 먼저 Flex 컨테이너를 설정해야 합니다. Flex 컨테이너는 display: flex 또는 display: inline-flex 속성을 적용한 요소입니다. Flex 컨테이너 내부의 직계 자식 요소들을 Flex 아이템이라고 합니다.

 

.container {
  display: flex;
}

 

주 축과 교차 축

Flexbox에서는 주 축(main axis)과 교차 축(cross axis)이라는 개념이 중요합니다. 주 축은 Flex 아이템들이 나열되는 방향을 결정하고, 교차 축은 주 축과 수직인 방향입니다.

 

• flex-direction: 주 축의 방향을 설정합니다. (row, row-reverse, column, column-reverse)
• flex-wrap: Flex 아이템들이 한 줄에 배치되거나 여러 줄에 걸쳐 배치되는지 설정합니다. (nowrap, wrap, wrap-reverse)

 

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

 

Flex 아이템 정렬

Flexbox에서는 다양한 속성을 사용하여 Flex 아이템들을 정렬할 수 있습니다.

 

• justify-content: 주 축을 기준으로 Flex 아이템들을 정렬합니다. (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: 교차 축을 기준으로 Flex 아이템들을 정렬합니다. (flex-start, flex-end, center, baseline, stretch)
• align-content: 교차 축을 기준으로 여러 줄의 Flex 아이템들을 정렬합니다. (flex-start, flex-end, center, space-between, space-around, stretch)

 

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 

Flex 아이템 크기 조절

Flex 아이템의 크기를 조절하는 속성은 다음과 같습니다.

 

• flex-grow: Flex 아이템이 컨테이너의 여유 공간을 얼마나 차지할지 결정합니다. (기본값: 0)
• flex-shrink: Flex 아이템이 컨테이너의 공간이 부족할 때 얼마나 줄어들지 결정합니다. (기본값: 1)
• flex-basis: Flex 아이템의 기본 크기를 설정합니다. (기본값: auto)

 

위의 세 가지 속성을 한 번에 지정할 수 있는 축약형 속성인 flex도 사용할 수 있습니다.

 

.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

/* 축약형 속성을 사용한 예 */
.item {
  flex: 1 0 auto;
}

 

순서 변경

Flexbox를 사용하면, Flex 아이템들의 순서를 변경할 수 있습니다. 이를 위해 order 속성을 사용합니다. 작은 값이 먼저 표시되며, 기본값은 0입니다.

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

 

이제 Flexbox의 기본 개념과 사용 방법을 이해했습니다. 이를 활용하여 다양한 레이아웃을 효율적으로 구현할 수 있습니다. 그러나 모든 브라우저에서 완벽하게 지원되지 않는 경우가 있으므로, 브라우저 호환성을 고려하여 적절한 접두사를 사용하거나 필요한 경우 다른 레이아웃 기법을 사용해야 합니다.

 

[CSS 핵심강좌] 6. Grid