Flexbox는 CSS3에서 소개된 레이아웃 모델로, 복잡한 레이아웃을 쉽게 만들 수 있습니다. Flexbox는 컨테이너와 그 안에 있는 항목들을 정렬하고 배치하는 데 유용합니다. 오늘은 Flexbox의 기본 개념과 주요 속성들에 대해 알아보고, 실행 가능한 예제를 통해 실습해 보겠습니다.
Flexbox의 기본 개념
Flexbox 레이아웃 모델은 두 가지 주요 구성 요소로 이루어집니다:
- Flex 컨테이너: Flexbox 레이아웃을 적용할 부모 요소
- Flex 항목: Flex 컨테이너 안에 있는 자식 요소들
Flexbox를 사용하려면, 부모 요소에 `display: flex` 또는 `display: inline-flex`를 설정해야 합니다.
Flexbox 속성들
컨테이너 속성
1. display
- `flex`: 블록 레벨의 flex 컨테이너를 만듭니다.
- `inline-flex`: 인라인 레벨의 flex 컨테이너를 만듭니다.
2. flex-direction
- `row`: 기본값. 요소들을 가로 방향으로 배치합니다.
- `row-reverse`: 요소들을 가로 방향으로 역순으로 배치합니다.
- `column`: 요소들을 세로 방향으로 배치합니다.
- `column-reverse`: 요소들을 세로 방향으로 역순으로 배치합니다.
3. flex-wrap
- `nowrap`: 기본값. 모든 요소를 한 줄에 배치합니다.
- `wrap`: 요소들을 여러 줄에 걸쳐 배치합니다.
- `wrap-reverse`: 요소들을 여러 줄에 걸쳐 역순으로 배치합니다.
4. justify-content
- `flex-start`: 기본값. 요소들을 컨테이너의 시작 부분에 배치합니다.
- `flex-end`: 요소들을 컨테이너의 끝 부분에 배치합니다.
- `center`: 요소들을 컨테이너의 가운데에 배치합니다.
- `space-between`: 요소들 사이에 동일한 간격을 둡니다.
- `space-around`: 요소들 주위에 동일한 간격을 둡니다.
5. align-items
- `stretch`: 기본값. 요소들을 컨테이너의 높이에 맞춰 늘립니다.
- `flex-start`: 요소들을 컨테이너의 시작 부분에 맞춥니다.
- `flex-end`: 요소들을 컨테이너의 끝 부분에 맞춥니다.
- `center`: 요소들을 컨테이너의 가운데에 맞춥니다.
- `baseline`: 요소들을 텍스트의 기준선에 맞춥니다.
6. align-content
- `stretch`: 기본값. 여러 줄의 요소들을 컨테이너의 높이에 맞춰 늘립니다.
- `flex-start`: 여러 줄의 요소들을 컨테이너의 시작 부분에 맞춥니다.
- `flex-end`: 여러 줄의 요소들을 컨테이너의 끝 부분에 맞춥니다.
- `center`: 여러 줄의 요소들을 컨테이너의 가운데에 맞춥니다.
- `space-between`: 여러 줄의 요소들 사이에 동일한 간격을 둡니다.
- `space-around`: 여러 줄의 요소들 주위에 동일한 간격을 둡니다.
항목 속성
1. order
- 요소의 배치 순서를 지정합니다. 기본값은 0입니다.
2. flex-grow
- 요소가 컨테이너 내에서 차지할 수 있는 비율을 지정합니다. 기본값은 0입니다.
3. flex-shrink
- 요소가 컨테이너 내에서 줄어들 수 있는 비율을 지정합니다. 기본값은 1입니다.
4. flex-basis
- 요소의 기본 크기를 지정합니다. 기본값은 `auto`입니다.
5. align-self
- 특정 요소를 다른 요소들과 독립적으로 정렬합니다. 기본값은 `auto`입니다. `auto`, `flex-start`, `flex-end`, `center`, `baseline`, `stretch` 값을 가질 수 있습니다.
이제 Flexbox의 기본 개념과 주요 속성들에 대해 알아보았으니, 예제를 통해 직접 실습해 보겠습니다.
Flex 컨테이너와 기본 속성들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example 1</title>
<style>
.container {
display: flex;
border: 2px solid #ccc;
padding: 10px;
width: 80%;
margin: auto;
}
.item {
background-color: #f0f0f0;
padding: 20px;
margin: 5px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Flex Direction과 Wrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example 2</title>
<style>
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 2px solid #ccc;
padding: 10px;
width: 300px;
height: 400px;
margin: auto;
}
.item {
background-color: #f0f0f0;
padding: 20px;
margin: 5px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>
Justify Content과 Align Items
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example 3</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #ccc;
padding: 10px;
height: 300px;
width: 80%;
margin: auto;
}
.item {
background-color: #f0f0f0;
padding: 20px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Flex Grow와 Flex Shrink
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example 4</title>
<style>
.container {
display: flex;
border: 2px solid #ccc;
padding: 10px;
width: 80%;
margin: auto;
}
.item {
background-color: #f0f0f0;
padding: 20px;
margin: 5px;
text-align: center;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
</body>
</html>
이 예제들을 통해 Flexbox의 다양한 속성을 직접 실험해보고, 요소의 배치 방식이 어떻게 달라지는지 확인해보세요.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] CSS transition 속성 transition-timing-function (2) | 2024.10.22 |
|---|---|
| [HTML/CSS] Position 속성에 대한 가이드 (0) | 2024.07.01 |
| [HTML/CSS] 버튼 클릭으로 하단 메시지 띄우기 (0) | 2024.05.25 |
| [HTML/CSS] html css 상단바 만드는법 (0) | 2024.05.19 |
| [HTML/CSS] Tailwind로 검색이 가능한 드롭다운 구현하기 (0) | 2024.05.13 |
