Flexbox(플렉스 박스)란 무엇인가?
플렉스 박스(Flexbox)는 CSS 레이아웃을 구성하는 요소들을 유연하게 배치하고 정렬하는 데 사용되는 레이아웃 모델이다. 복잡한 레이아웃을 쉽고 효율적으로 만들 수 있도록 도와준다.
Flexbox는 컨테이너 내 항목을 효율적이고 동적으로 정렬하기 위해서 CSS 버전 3에서 도입되었다.
마인크래프트(Minecraft)라는 게임에 대해서는 다들 한번쯤은 들어봤을 것이다. 마인크래프트는 모든 것이 네모난 블록으로 이루어진 세계에서 네모 블록을 쌓아(마치 레고처럼) 건축 등을 할 수 있는데 간단한 모양의 집부터 복잡한 모양의 집을 쉽게 만들 수 있고 내부 인테리어도 쉽게 배치하고 재배치 할 수 있다.
플렉스 박스는 웹페이지의 디자인을 이처럼 쉽게 할 수 있도록 도와주는 도구라고 할 수 있다.
플렉스 박스 이전에 사용하던 레이아웃 디자인 방법
- Block: 웹 페이지에서 섹션을 생성하는 데 사용
- Inline: 텍스트에 사용되는 레이아웃 방법
- Table: 2차원 데이터가 있는 테이블에 사용
- Positioned: 요소의 특정 위치를 지정하는 데 사용
플렉스 박스의 주요 요소
플렉스 박스의 주요 요소는 다음과 같다.
1. 플렉스 컨테이너 (Flex Container)
- 플렉스 아이템들을 감싸는 부모 요소이다.
- display: flex; 또는 display: inline-flex; 속성을 적용하여 플렉스 컨테이너로 만든다.
- div, section 등과 비슷하다고 할 수 있다.
플렉스 컨테이너 속성
- display: 플렉스 컨테이너를 정의합니다.
- display: flex; - 블록 레벨 플렉스 컨테이너
- display: inline-flex; - 인라인 플렉스 컨테이너
- flex-direction: 주축의 방향을 설정합니다.
- flex-direction: row; - 가로 방향 (기본값)
- flex-direction: column; - 세로 방향
- flex-direction: row-reverse; - 가로 역방향
- flex-direction: column-reverse; - 세로 역방향
- justify-content: 주축을 기준으로 아이템들을 정렬합니다.
- justify-content: flex-start; - 시작점 정렬
- justify-content: flex-end; - 끝점 정렬
- justify-content: center; - 가운데 정렬
- justify-content: space-between; - 양 끝에 아이템을 배치하고 나머지 공간을 균등하게 분배
- justify-content: space-around; - 각 아이템 주위에 균등한 공간 분배
- justify-content: space-evenly; - 아이템들 사이와 양 끝에 동일한 공간 분배
- align-items: 교차축을 기준으로 아이템들을 정렬합니다.
- align-items: flex-start; - 시작점 정렬
- align-items: flex-end; - 끝점 정렬
- align-items: center; - 가운데 정렬
- align-items: baseline; - 베이스라인 정렬
- align-items: stretch; - 늘려서 채우기
- flex-wrap: 아이템들이 컨테이너를 벗어날 경우 줄바꿈을 설정합니다.
- flex-wrap: nowrap; - 줄바꿈 없음 (기본값)
- flex-wrap: wrap; - 줄바꿈
- flex-wrap: wrap-reverse; - 역방향 줄바꿈
- align-content: 교차축을 기준으로 아이템들의 줄을 정렬합니다.
- align-content: flex-start; - 시작점 정렬
- align-content: flex-end; - 끝점 정렬
- align-content: center; - 가운데 정렬
- align-content: space-between; - 양 끝에 줄을 배치하고 나머지 공간을 균등하게 분배
- align-content: space-around; - 각 줄 주위에 균등한 공간 분배
- align-content: stretch; - 늘려서 채우기
2. 플렉스 아이템 (Flex Item)
- 플렉스 컨테이너 안에 있는 자식 요소들이다.
- 플렉스 컨테이너의 속성에 따라 배치 및 정렬 방식이 결정된다.
- div, span 등 과 비슷하다고 할 수 있다.
플렉스 아이템 속성
- flex-grow: 아이템이 컨테이너의 남는 공간을 차지하는 비율을 설정합니다.
- flex-shrink: 아이템이 컨테이너보다 클 경우 축소되는 비율을 설정합니다.
- flex-basis: 아이템의 기본 크기를 설정합니다.
- flex: flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 단축 속성입니다.
- align-self: 개별 아이템의 교차축 정렬 방식을 설정합니다.
3. 주축 (Main Axis)과 교차축 (Cross Axis)
- 플렉스 컨테이너는 주축과 교차축이라는 두 개의 축을 기준으로 아이템들을 배치한다.
- 주축은 아이템들이 배치되는 방향을 결정하고, 교차축은 주축과 수직인 방향을 결정한다.
- 기존 레이아웃의 방향성과 비슷하다고 할 수 있다.
주축과 교차축 속성
- flex-direction: 주축의 방향을 설정합니다.
- row (기본값): 가로 방향
- column: 세로 방향
- row-reverse: 가로 역방향
- column-reverse: 세로 역방향
- justify-content: 주축을 기준으로 아이템을 정렬합니다.
- flex-start: 시작점 정렬
- flex-end: 끝점 정렬
- center: 가운데 정렬
- space-between: 양 끝에 아이템을 배치하고 나머지 공간을 균등하게 분배
- space-around: 각 아이템 주위에 균등한 공간 분배
- space-evenly: 아이템들 사이와 양 끝에 동일한 공간 분배
- align-items: 교차축을 기준으로 아이템을 정렬합니다.
- flex-start: 시작점 정렬
- flex-end: 끝점 정렬
- center: 가운데 정렬
- baseline: 베이스라인 정렬
- stretch: 늘려서 채우기
플렉스 박스의 구성 방법
기본적으로 플렉스 박스는 플렉스 컨테이너(부모 요소)와 플렉스 아이템(자식 요소)로 구성된다.
여기에 주축과 교차축을 사용해서 플렉스 아이템이 배치되는 방향을 설정하게 된다.
주축은 플렉스 아이템들이 배치되는 기본적인 방향을 나타내고, 교차축은 주축에 수직인 방향을 나타낸다.
즉, 주축이 가로 방향이면 교차축은 세로 방향이 되지만, 주축이 세로 방향이면 교차축은 가로 방향이 된다.
플렉스 박스 사용 예시
우선 플렉스 박스를 사용하기 위해서는 플렉스 박스를 적용하려는 태그에 display 속성을 반드시 적용해야한다.
- display: flex - 블록 레벨 플렉스 컨테이너
- display: inline-flex - 인라인 플렉스 컨테이너
1. 메뉴 바 (Navigation Bar)
이처럼 플렉스 박스를 사용하여 메뉴 항목들을 가로 방향으로 균등하게 배치하고 정렬할 수 있다.
<body>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>.navbar {
display: flex;
justify-content: space-around;
background-color: #f0f0f0;
padding: 10px;
}
.navbar a {
text-decoration: none;
color: #333;
}
이렇게 코드를 구성하게 되면 nav 태그를 동적으로 구현할 수 있다. 브라우저의 크기가 클 때는 1번 예시와 같이 옆으로 길게 나타나고 브라우저의 크기가 작아지면 2번 예시와 같이 가로 폭이 좁아진다.
2. 버튼 그룹 (Button Group)
플렉스 박스를 사용하여 버튼들을 가로 또는 세로 방향으로 균일하게 배치하고 정렬할 수 있다.
<div class="button-group">
<button>OK</button>
<button>Cancel</button>
<button>Submit</button>
</div>.button-group {
display: flex;
justify-content: center;
}
.button-group button {
margin: 5px;
padding: 10px 20px;
}
3. 카드 레이아웃 (Card Layout)
플렉스 박스를 사용하여 카드들을 격자 형태로 배치하고, 남는 공간을 균등하게 분배할 수 있다.
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
width: 200px;
height: 150px;
background-color: #e0e0e0;
margin: 10px;
}
이런식으로 브라우저 크기에 따라 레이아웃이 변경되는 것을 확인 할 수 있다.
4. 웹 페이지 레이아웃 (Web Page Layout)
플렉스 박스를 사용하여 웹 페이지의 헤더, 본문, 푸터 영역을 효율적으로 배치하고 정렬할 수 있다.
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
background-color: #ccc;
padding: 20px;
margin: 10px;
text-align: center;
}
main {
flex-grow: 1;
padding: 20px;
}
'CSS > css 심화' 카테고리의 다른 글
| CSS 심화 공부(7) - flex item 속성(1) : flex item order (0) | 2025.03.12 |
|---|---|
| CSS 심화 공부(6) - 플렉스 컨테이너의 속성(2) 정렬 방식 : justify-content, align-items, align-content (0) | 2025.03.12 |
| CSS 심화 공부(5) - 플렉스 컨테이너의 속성(1) 레이아웃 방식 : display, direction, wrap, flow (0) | 2025.03.12 |
| CSS 심화 공부(3) - 동적 변화(animation) (0) | 2025.03.11 |
| CSS 심화 공부(2) - 동적 변화(transform) (0) | 2025.03.11 |