CSS Flexbox는 웹 레이아웃을 만들기 위한 레이아웃 모듈

CSS Flexbox는 웹 레이아웃을 만들기 위한 레이아웃 모듈 중 하나로, 요소의 크기나 위치를 지정하여 유연하게 배치할 수 있습니다. Flexbox는 기본적으로 수평 정렬을 위해 개발되었지만, 수직 정렬도 가능합니다.

기본 개념
Flexbox를 사용하기 위해서는, flex container와 flex item이라는 두 가지 개념이 필요합니다.

Flex Container : Flexbox 레이아웃을 적용할 수 있는 최상위 요소입니다. display: flex를 사용하여 Flex Container를 설정합니다.
Flex Item : Flex Container 내에 있는 모든 요소를 Flex Item으로 간주합니다. Flex Container 내에서 Flex Item을 정렬하고 배치합니다.
Flex Container는 하나의 축에 대해 정렬이 가능합니다. 이를 기준으로 수평 방향 또는 수직 방향으로 Flex Item을 배치합니다. Flex Container의 축은 flex-direction 속성으로 설정할 수 있습니다. 기본 값은 row입니다.

속성
Flexbox를 적용할 때 사용하는 주요 속성은 다음과 같습니다.

display: Flex Container를 지정합니다. display: flex를 사용합니다.
flex-direction: Flex Container 내에서 Flex Item을 배치하는 축을 지정합니다. row, column, row-reverse, column-reverse 값을 사용할 수 있습니다.
justify-content: Flex Container 내에서 Flex Item을 수평 방향으로 정렬합니다. flex-start, flex-end, center, space-between, space-around 등의 값을 사용할 수 있습니다.
align-items: Flex Container 내에서 Flex Item을 수직 방향으로 정렬합니다. flex-start, flex-end, center, baseline, stretch 등의 값을 사용할 수 있습니다.
flex-wrap: Flex Item이 Flex Container의 크기를 벗어날 때, 여러 줄에 걸쳐 배치할지 아니면 축소하여 배치할지를 결정합니다. nowrap, wrap, wrap-reverse 값을 사용할 수 있습니다.
flex-grow: Flex Item의 증가 비율을 설정합니다. 기본 값은 0이며, 1로 설정할 경우, Flex Container 내의 공간을 균등하게 분배합니다.
flex-shrink: Flex Item의 감소 비율을 설정합니다. 기본 값은 1이며, 0으로 설정할 경우, Flex Container 내의 공간이 부족해도 Flex Item의 크기를 유지합니다.
flex-basis: Flex Item의 기본 크기를 설정합니다. auto를 기본 값으로 사용할 경우, Flex Item의 내용에 맞게 크기가 지정됩니다.
flex: flex-grow, flex-shrink, flex-basis를 한번에 지정할 수 있는 단축 속성입니다. 예를 들어, flex: 1 0 auto는 flex-grow: 1; flex-shrink: 0; flex-basis: auto;와 같은 효과를 가집니다.
10. order: Flex Item의 배치 순서를 지정합니다. 기본 값은 0이며, 양수 또는 음수 값을 사용할 수 있습니다.

 

예제
다음은 Flexbox를 사용하여 간단한 레이아웃을 만드는 예제입니다.

HTML:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

CSS:

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

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

.item3 {
  order: 3;
}

위 예제는 Flex Container인 .container 내에 세 개의 Flex Item인 .item을 배치합니다. .container는 flex-wrap: wrap 속성을 사용하여 Flex Item이 한 줄에 들어가지 않을 경우, 여러 줄로 나누어 배치합니다. justify-content: center와 align-items: center 속성을 사용하여 Flex Item을 수평 방향과 수직 방향으로 가운데 정렬합니다.

각각의 Flex Item인 .item은 order 속성을 사용하여 배치 순서를 조절합니다. 위 예제에서는 .item1을 2번째, .item2를 1번째, .item3을 3번째로 배치하였습니다.

위 예제를 실행하면, Flex Container가 화면의 중앙에 위치하며, 세 개의 Flex Item이 가운데 정렬되어 배치됩니다. 각 Flex Item의 배치 순서가 조정되어 있기 때문에, .item2가 가장 왼쪽에, .item1이 가장 오른쪽에 배치됩니다.