가이드라인

플렉스박스(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; }

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

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말