본문 바로가기
프로그래밍/CSS

CSS Flexbox를 활용한 레이아웃 디자인 방법

by 꾸션 2023. 3. 13.

CSS Flexbox는 최근에 가장 많이 사용되는 레이아웃 디자인 방법 중 하나입니다. Flexbox를 사용하면 간단하게 유연한 레이아웃을 구성할 수 있습니다. 이번 글에서는 CSS Flexbox를 활용한 레이아웃 디자인 방법에 대해 알아보겠습니다.

Flexbox란?

CSS Flexbox는 브라우저에서 요소의 크기, 위치 및 순서를 유연하게 제어할 수 있는 레이아웃 모듈입니다. Flexbox는 요소를 가로 또는 세로 방향으로 정렬할 수 있으며, 간격을 조절하거나 중앙 정렬을 할 수도 있습니다.

Flex Container와 Flex Item

Flexbox 레이아웃은 Flex Container와 Flex Item으로 구성됩니다. Flex Container는 Flexbox 레이아웃을 적용할 요소이며, Flex Item은 Flex Container 안에 있는 자식 요소입니다.

Flex Container 속성

Flex Container를 설정하기 위해서는 "display" 속성에 "flex" 값을 지정해야 합니다. 그리고 Flex Container에 적용할 수 있는 속성은 다음과 같습니다.

1. justify-content

Flex Item의 수평 방향 정렬을 지정합니다.

.container {
  justify-content: center; /* 가운데 정렬 */
}

2. align-items

Flex Item의 수직 방향 정렬을 지정합니다.

.container {
  align-items: center; /* 가운데 정렬 */
}

3. flex-direction

Flex Item의 방향을 지정합니다. 기본 값은 "row"입니다.

.container {
  flex-direction: column; /* 세로 방향으로 정렬 */
}

4. flex-wrap

Flex Item이 한 줄에 다 들어갈 수 없을 때 줄 바꿈 여부를 지정합니다.

.container {
  flex-wrap: wrap; /* 한 줄에 모두 들어가지 않을 경우, 다음 줄로 이동 */
}

5. align-content

여러 줄의 Flex Item을 수직 방향으로 정렬합니다.

.container {
  align-content: space-between; /* 여러 줄을 동일한 간격으로 배치 */
}

Flex Item 속성

Flex Item에 적용할 수 있는 속성은 다음과 같습니다.

1. flex

Flex Item의 너비를 지정합니다. "flex-grow", "flex-shrink", "flex-basis" 세 가지 속성을 축약한 것입니다.

.item {
  flex: 1; /* Flex Container 내에서 동일한 너비를 가짐 */
}

2. order

Flex Item의 순서를 지정합니다.

.item {
  order: 1; /* Flex Container에서 첫 번째로 배치 */
}

3. align-self

Flex Item의 수직 방향 정렬을 지정합니다. Flex Container의 align-items 속성보다 우선합니다.

.item {
  align-self: center; /* 해당 Flex Item을 수직 방향 가운데 정렬 */
}

결론

CSS Flexbox를 사용하면 간단하게 유연한 레이아웃을 구성할 수 있습니다. 이번 글에서는 CSS Flexbox의 개념과 Flex Container와 Flex Item에 적용할 수 있는 속성에 대해 알아보았습니다. Flexbox를 사용하여 웹 사이트의 레이아웃을 디자인할 때 이번 글의 내용을 참고해 보시기 바랍니다.

반응형

댓글