<!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"></div>
<div style="background-color: #fcf6bd"></div>
<div style="background-color: #d0f4de"></div>
<div style="background-color: #a9def9"></div>
<div style="background-color: #e4c1f9"></div>
</section>
</body>컨테이너 개념을 포함하는 평범하고 전형적인 섹션이다.
body {
font-family: 'Merriweather', serif;
}
h1 {
text-align: center;
}
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
}display 속성
#container div {
width: 200px;
height: 200px;
}
각각의 <div>는 블록 레벨 요소로서 하나의 섹션안에 존재한다. 이 컨테이너의 diplay를 flex로 설정하면 어떻게 될까?
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
}회색 박스를 넘었던 컬러 박스들이 지금은 좌, 우로 정렬되었다. 컨테이너 안에 있는 요소에 flexbox속성을 주었더니 위와 같은 결과가 나왔다.
main axis(메인 축), cross axis(교차 축)
display를 flex로 설정하여 만든 상자 또는 컨테이너가 있다고 가정해보자.
위와 같은 flexbox에는 두개의 축이 있다. main axis(메인 축)과 cross axis(교차 축)이 있다.
main axis(메인 축)의 기본 방향은 왼쪽에서 오른쪽이다. 콘텐츠가 왼쪽에서 오른쪽으로 정렬된다.
flex-direction
flex-direction을 통해서 속성의 방향을 바꿀 수 있다. flex-direction은 컨테이너 안에서 본축 방향을 결정하는 속성으로 기본 값은 flex-direction:row;이다.
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: row;
}flext-direction: row;를 적었더니 아무런 변화가 없었다. 이 컨테이너는 본축 방향이다.
그렇다면 어떻게 컨테이너의 본축 방향을 바꿀 수 있을까?
컨테이너 본축 방향을 바꾸는 방법
1. row-reverse
본축의 방향을 반대로 바뀐다. 여전히 수평이지만 row-reverse가 방향만 반대 즉 우→좌로 바꾸는 거다.
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: row-reverse;
}flex-direction: row-reverse;를 적으니 가로 정렬이지만 방향만 반대로 되었다.
2. column, column-reverse
2.1. coulmn
column을 넣으면 상→하 방향으로 세로 정렬된다. 본축이 상→하로 바뀌었다.
#container {
background-color: #6c757d;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: column;
}본축이 상→하 방향으로 바뀌었다. 위의 사진의 요소들은 더 이상 200*200가 아니다.
왜냐하면 컨테이너 높이(height)를 500px로 설정했기 때문이다. 그렇다면 컨테이너 height를 800px로 키우면?
컨테이너 또한 flexbox안에 있기때문에 커진다. 놀랍게도 실제 크기는 미리 설정한 200*200이다.
위의 질문 처럼 왼쪽 사진은 height:800px;로 입력했다. flexbox안에 넣어뒀기 때문에 컨테이너가 커졌다.
오른쪽 사진은 height: 1200px;로 설정했다. flexbox 크기가 커졌지만 컨테이너는 일정 크기가 되자 더 이상 커지지 않았다.
그 이유는 display 속성 부분에서
#container div {
width: 200px;
height: 200px;
}위의 코드와 같이 설정했기 때문이다. 이제는 본축이 상→하이다.
2.1. coulmn-reverse
coulmn-reverse를 활용하면 하→상으로 보라색에서 빨간색 방향으로 바꿀 수 있다.
#container {
background-color: #6c757d;
width: 90%;
height: 1200px;
margin: 0 auto;
border: 5px solid #6c757d;
display: flex;
flex-direction: column-reverse;
}- display를 flex로 설정한 모든 것에는 본축이 있다.
- 기본 값은 좌→우이지만 우→좌, 상→하, 하→상으로 바꿀 수 있다.
- flex-direction은 컨테이너 안의 콘텐츠의 방향을 결정한다.
'📦 CSS > CSS' 카테고리의 다른 글
| [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 ① (0) | 2022.11.25 |
| [CSS] Background (0) | 2022.11.24 |
| [CSS] hover 효과를 이용한 button (0) | 2022.11.24 |