CSS로 원하는 형태의 레이아웃을 만드는 건 생각보다 쉽지 않습니다. Position, Float, Table 등을 이용해서 레이아웃을 하면 복잡하고 시간도 많이 걸립니다. 이걸 도와주는 친구가 바로 '플렉스 박스 레이아웃'입니다. '플렉스 박스 레이아웃'을 사용하면 박스 높이를 동일하게 맞추거나 아이템의 사이즈에 상관없이 동일한 간격으로 배치하는 일 등이 쉬워집니다.
1. Flex -box는 'container'와 'item'으로 이루어져 있습니다.
'container'와 'item'에는 들어가는 속성들도 아래처럼 다른데요 ㅎㅎ 오늘은 몇가지만 살펴보겠습니다. contariner속성에는 display, flex-flow, justify-content, align-content, align-item 등이 있고, item 속성에는 order, flex, align-self 등이 있습니다.
2. Flex -box의 배치는 '주축 배치', '교차로 배치'가 있습니다
display: flex 상태에서 주축과 교차축을 이동시켜보면서 이해해보겠습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>.container{
width: 800px;
height: 400px;
border: 5px solid black;
background-color: burlywood;
/* flex-box로 만들어주기 */
display: flex;
/* 주축정렬 */
/* 교차 축정렬 */
}
.item{
width: 100px;
height: 100px;
border: 5px solid black;
background-color: chocolate;
margin: 10px;
font-size: 60px;
}
3. 주축배치 → justify-content
justify-content: flex-start; (기본값)
justify-content: flex-end;
4. 교차축배치 → align-items
align-items: flex-start;
align-items: flex-end;
그렇다면 이번에는 주축과 교차축을 모두 중앙정렬 해보겠습니다
/* 주축방향 정렬 */
justify-content: center;
/* 교차축방향 정렬*/
align-items: center;
참 쉽죠?
한 단계만 더 해볼까요?
요소 안에 글자를 넣고 글자를 정렬시켜보도록 하겠습니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</body>
</html>
이 상태에서 글자를 아래처럼 가운데 정렬하려면 어떻게 해야할까요?
위에서 한 것과 똑같습니다.
item의 display를 flex로 주고, 주축과 교차축에 center를 넣어주면 됩니다 :)
.container{
width: 800px;
height: 400px;
border: 5px solid black;
background-color: burlywood;
display: flex;
justify-content: center;
align-items: center;
}
.item{
width: 100px;
height: 100px;
border: 5px solid black;
background-color: chocolate;
margin: 10px;
font-size: 60px;
/* flex-box로 적용하기 */
display: flex;
justify-content: center;
align-items: center;
}
'지금, 개발하기 > CSS' 카테고리의 다른 글
| HTML/CSS] label 태그는 언제 쓰는 건가요? (0) | 2021.10.05 |
|---|---|
| HTML/CSS] flex- box로 요소 배치하기2 (0) | 2021.08.22 |
| HTML/CSS] float을 이용하여 왼쪽/오른쪽 정렬하기 (0) | 2021.08.20 |
| HTML/CSS] Position으로 요소 배치하기 (0) | 2021.08.18 |
| HTML/CSS] baseline이란? (0) | 2021.07.09 |
