CSS의 display: flex;를 활용하여 웹 레이아웃 구성과 정렬

by

웹 디자인에서 레이아웃을 구성하고 요소를 정렬하는 것은 중요한 작업 중 하나입니다. 그리고 이러한 작업을 더욱 간편하고 효율적으로 수행할 수 있게 도와주는 CSS의 display: flex; 속성에 대해 알아보겠습니다.


display: flex;란?

display: flex;는 CSS에서 요소를 유연하게 배치하고 정렬하기 위한 속성입니다. 이를 사용하면 부모 요소를 플렉스 컨테이너로 설정하고, 자식 요소들을 플렉스 아이템으로 배치할 수 있습니다.


기본 사용법

먼저, display: flex;를 사용하여 부모 요소를 플렉스 컨테이너로 만들어 보겠습니다.

.flex-container {
  display: flex;
}

이제 .flex-container 안에 있는 자식 요소들은 자동으로 가로로 나란히 배치됩니다. 이것이 display: flex;의 기본 동작입니다.


수직 정렬

플렉스 컨테이너 내에서 아이템들을 수직으로 정렬하려면 align-items 속성을 사용합니다.

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

align-items를 center로 설정하면 아이템들이 수직으로 가운데 정렬됩니다.


수평 정렬

수평 정렬을 위해서는 justify-content 속성을 활용합니다.

.flex-container {
  display: flex;
  justify-content: space-between; /* 수평 간격을 두고 정렬 */
}

justify-content를 space-between으로 설정하면 아이템들이 가로로 나란히 배치되며, 부모 요소 내에서 공간을 균등하게 분배합니다.


간격 조절

플렉스 아이템 간 간격을 조절하려면 gap 속성을 사용합니다.

.flex-container {
  display: flex;
  gap: 10px; /* 플렉스 아이템 간 10px 간격 설정 */
}

gap 속성을 사용하면 플렉스 아이템 사이에 일정한 간격을 설정할 수 있습니다.


플렉스 아이템 순서 변경

order 속성을 사용하여 플렉스 아이템의 순서를 변경할 수 있습니다. 이를 통해 HTML 구조와는 무관하게 아이템의 배치 순서를 조절할 수 있습니다.

.flex-item {
  order: 2; /* 두 번째 아이템으로 이동 */
}

order 속성을 사용하면 플렉스 아이템의 배치 순서를 조절할 수 있습니다.


display: flex;는 웹 디자인에서 레이아웃을 구성하고 요소를 정렬하는 데 매우 강력하고 유용한 도구입니다. 특히 반응형 디자인을 구현하거나 복잡한 레이아웃을 다룰 때 효과적으로 활용할 수 있습니다. CSS의 display: flex;를 활용하여 웹 디자인을 더욱 효율적으로 개발해보세요!




Leave a Comment