반응형
flex-direction 은 두 가지 값을 가진다.
1. column
2. row (수평)
기본적으로 display: flex 이면 row(수평) 값을 가진다.
flex-direction: column 이면
주축은 수직이 되고, 교차축은 수평이 된다. (그냥 외워라)
한마디로 뒤바뀐다!!!!
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-end;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
#second {
background-color: wheat;
}
</style>
</head>
<body>
<div></div>
<div id="second"></div>
<div></div>
</body>
</html>
결과
그밖에 flex-direction에 들어갈 수 있는 값:
column-reverse; (수직기준 순서 거꾸로됨)
row-reverse; (수평기준 순거 거꾸로됨)
반응형
'2. CSS' 카테고리의 다른 글
| CSS flex-wrap 사용하기 (0) | 2024.11.19 |
|---|---|
| CSS flex 태그: 자식 엘리먼트를 flex 컨테이너로 만들기 (0) | 2024.11.19 |
| CSS flex box(플렉스 박스)의 특징2 (0) | 2024.11.19 |
| CSS flex box(플렉스 박스)의 특징1 (0) | 2024.11.19 |
| CSS inline-block 태그 사용하기 (0) | 2024.11.19 |