728x90
align-items
align-items는 교차축을 따라 아이템을 배열합니다. (justify-content는 메인 축을 따른다.)
align-items: flext-start;
교차축의 시작점을 기준으로 한다.
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
#container div {
width: 200px;
height: 200px;
text-align: center;
}align-item: flex-start;가 디폴드 값이다.
align-items: flex-end;
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
}박스는 가로 방향인 주축에 맞춰 중앙 정렬되었다. (오른쪽→왼쪽) 입력한 교차축의 끝점에 맞춰 정렬되었다.
align-items: flex-center;
수직과 수평 방향을 한 번에 중앙 정렬하고 싶을때 이용하면 된다. 요소의 종류나 크기에 상관없이 똑같이 적용된다.
<!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>Flexbox</title>
<link rel="stylesheet" href="flexbox.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #ff99c8">H</div>
<div style="background-color: #fcf6bd">E</div>
<div style="background-color: #d0f4de; height: 300px;">L</div>
<div style="background-color: #a9def9">L</div>
<div style="background-color: #e4c1f9; height: 450px;">O</div>
</section>
</body>
</html>#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#container div {
width: 200px;
height: 200px;
text-align: center;
font-size: 7em;
}
align-items: center;를 입력하니 높이를 기반으로 중앙정렬이 되었다. 교차축은 위→아래 방향이다. 왼쪽 사진의 텍스트를 보면 중앙 정렬의 영향을 받지 않았다.
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
}align-items를 baseline으로 설정하면 텍스트의 기준선에 맞춰 정렬된다.
728x90
'📦 CSS > CSS' 카테고리의 다른 글
| [CSS] Flex Sizing Properties | flex-basis | flex-grow | flex-shrink | flex (0) | 2022.12.01 |
|---|---|
| [CSS] align-content | align-self (0) | 2022.11.30 |
| [CSS] Flexbox 속성 ③ | flex-wrap: wrap; | flex-wrap: wrap-reserve; | flex-wrap: nowrap; (1) | 2022.11.28 |
| [CSS] flexbox 속성 | justify content ③ (0) | 2022.11.26 |
| [CSS] flexbox의 속성 | main-axis | flex-direction ② (0) | 2022.11.26 |