본문으로 건너뛰기
실습하기

플렉스박스(Flexbox) - 기본

Flexbox는 레고 블록과 같습니다.

레고 블록을 쌓아서 원하는 모양을 만들 수 있듯이, Flexbox를 사용하면 웹 페이지의 요소들을 쌓아서 원하는 모양의 웹 페이지를 만들 수 있습니다.

이전에는 콘텐츠를 상하좌우 또는 중앙 정렬할 때 복잡한 CSS 규칙을 사용해야 했지만, Flexbox를 사용하면 간단하게 요소를 정렬할 수 있습니다.

CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Flex 컨테이너 & Flex 아이템​

Flexbox 내에서 요소들을 감싸고 있는 박스를 Flex Container, 박스 내 요소들은 Flex Item이라고 합니다.

  • Flex Container: Flexbox 레이아웃을 적용할 부모 요소로, 여기에 속한 자식 요소들을 Flex Item이라고 부릅니다.

  • Flex Item: Flex Container 내부의 각각의 요소로, 이 요소들은 Container의 속성에 따라 정렬되거나 배치됩니다.


Flexbox 사용법​

CSS
.container {
  display: flex;
}

위와 같이 CSS에 display: flex; 속성을 추가하면 해당 요소는 Flex Container가 되며, 그 안에 있는 모든 자식 요소들은 자동으로 Flex Item이 됩니다.


Flexbox 주요 속성​

  1. display: flex;

Flex Container를 정의하는 속성으로, flex 속성을 적용하면 컨테이너 내 자식 요소들이 Flex Item이 됩니다.

CSS
.container {
  display: flex;
}

  1. flex-direction

Flex Item들이 배치될 방향을 정의합니다. row로 설정하면 가로 방향, column으로 설정하면 세로 방향으로 Flex Item들이 배치됩니다.

CSS
.container {
  flex-direction: row; /* 혹은 column */
}

  1. flex-wrap

Flex Container 내 Flex Item들이 한 줄에 배치되게 할 것인지, 또는 필요하다면 여러 줄에 걸쳐 배치되게 할 것인지를 정의합니다.

flex-wrap: nowrap;으로 설정하면 Flex Item들은 무조건 한 줄에 배치되며, flex-wrap: wrap;으로 설정하면 부모의 너비를 넘어간 Flex Item을 새로운 줄에 배치합니다.

CSS
.container {
  flex-wrap: nowrap; /* flex item들을 한 줄에 배치 */
}

실습​

Flexbox 레이아웃을 간단하게 구현한 코드는 아래와 같습니다.

HTML
<div class="flex-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
CSS
.flex-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.box {
  padding: 30px;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  background-color: #c8e6c9;
  border-radius: 5px;
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!