flexbox는 CSS의 레이아웃 기술 중 하나이다. 앞서 grid로 레이아웃을 만들었는데, 차이점이 무엇일까??
둘의 차이는 Flex는 1차원으로 수평, 수직 영역중 하나의 방향으로만 레이아웃을 나눌 수 있는데 반면 Grid는 2차원으로 수평 수직 동시에 영역을 나눌 수 있다는 점이다.
그렇다면 flexbox는 어떻게 사용할까? 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
div {
display: inline-block;
width: 300px;
height: 300px;
background-color: teal;
}
#second {
background-color: wheat;
}
</style>
</head>
<body>
<div></div>
<div id="second"></div>
<div></div>
</body>
</html>
1. 우선 자식 엘리멘트에 해당하는 박스들을 우리가 원하는 곳에 배치하기 위해서 부모 엘리먼트를 flex container로 만들어준다. 여기서는 body태그를 flex container로 만들어주었다.
2. 그리고 스타일로 가서 display: flex를 써주었다.
3. display: flex 써주면 아래의 기능을 사용할 수 있다.
- justify-content → 수평으로 작용(main axis)
- align-items → 수직으로 작용(cross axis)
위의 코드에서는 수평방향으로 박스를 일정한 간격으로 나눠주었다. 그 결과
원래 이랬던 박스들이
이렇게 분산되었음을 볼 수 있다. 그런데 이상한 점이 하나 있다. align-items: center; 로 수평축 뿐만 아니라 수직축을 기준으로 가운데 정렬을 명령했는데도 박스들이 그대로다. 왜 이런 것일까? 개발자 도구로 확인해보자.
확인을 해보니 이 3개의 박스 자체가 body태그의 엘리먼트이다. 그렇기 때문에 이미 수직축을 기준으로 가운데정렬이 되있는 상태라 볼 수 있는것이다. 그래서 저 명령을 주고 싶다면 높이(height)를 주면 된다.
style로 가서 다음과 같이 높이를 추가해주자.
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
여기서 vh라는 단위가 사용되었는데 이는 화면의 비율로 크기표현을 하는 단위이다. 예를 들어 height: 100vh 라면 화면 높이의 100%를 사용하겠다는 의미이다. 디바이스별로 화면의 크기가 모두 다르기 때문에 이 vh라는 단위를 써주면 편리하다. 이제 결과를 확인해보자.
그럼 다음과 같이 수직축을 기준으로 가운데 정렬이 되었음을 확인할 수 있다. (구분을 위해 배경색을 임시로 입혀주었다!)
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #12. position: fixed, relative, absolute (0) | 2021.12.10 |
|---|---|
| [HTML/CSS] #11.Media Query (반응형 웹디자인) (0) | 2021.12.10 |
| [HTML/CSS] #9.그리드 (0) | 2021.12.09 |
| [HTML/CSS] #8.박스 모델 (0) | 2021.12.05 |
| [HTML/CSS] #7.선택자 (tag, class, id) (0) | 2021.12.01 |
