| # | 도전 과제 | 통과 |
|---|---|---|
| 1 | 아이템 배치하기 | |
| 2 | Flexbox 게임 |
05 CSS Flex 레이아웃
# CSS Flex 레이아웃
## 미션
---
HTML과 CSS를 활용하여, 아래와 같은 화면을 만드시오.
## 개념
---
#### ⭐️ Flex란?
정렬을 위한 도구 Flex! 이는 내부 아이템 배치를, 쉽게 도와준다. ~~더 엄밀히는 레이아웃을 위한 문법이다.~~
#### ⭐️ Flex의 두 축
Flex는 두 개의 축으로 구성된다. 바로 주축(main-axis)과 교차(cross-axis)축이다.
Flex 컨테이너 속에 아이템을 넣으면, 주축 방향으로 쌓인다.
## 코드
---
1) HTML 문서 작성 - index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
```
2) CSS 적용 - style.css
```
.container {
width: 870px;
height: 300px;
border: 4px solid #323332;
background-color: #1597af;
}
.item {
width: 100px;
height: 100px;
border: 4px solid #323332;
background-color: #e43680;
margin: 10px;
font-size: 50px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
```
## 결과
---
## 질문
---
- flex로 정렬하는 방법?
Challenge
개념 실습! 학습 내용을 진짜 내 것으로 만들기!