728x90
반응형
[CSS] 5. Flex-direction 속성
1. Flexbox의 두 개의 축: 주축(main Axis)와 교차축(cross axis)
flexbox 레이아웃의 정렬을 이해하는 데 가장 중요한 역할을 한다. 주축(main axis)와 교차축(cross axis)의 방향
(1) 주축 방향(main axis)
(2) 교차축 방향(cross axis)
2. Flex-direction 속성이란?
3. 시나리오 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 블록 요소 예시</title>
<style type="text/css">
.container{
display:block;
border:1px solid black;
}
.item{
background-color:lightblue;
padding:10px;
margin:5px;
border: 1px solid blue;
}
.container{
background-color:red;
border:1px solid black;
}
</style>
</head>
<body>
<!-- http://localhost:8080/demo1/demo_03.html -->
<h1>여기는 demo_03.html 파일입니다.</h1>
<br>
<h3>flex-direction : row</h3>
<div class ="container">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 블록 요소 예시</title>
<style type="text/css">
.container{
display:flex;
border: 1px solid black;
flex-direction: row;
}
.item{
background-color: lightblue;
padding:10px;
margin:5px;
border: 1px solid blue;
}
</style>
</head>
<body>
<!-- http://localhost:8080/demo1/demo_01.html -->
<h1>여기는 3.html 파일입니다.</h1>
<br>
<h3>flex-direction : row(기본값)</h3>
<div class="container">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
<div class="item">아이템4</div>
</div>
<h3>flex-direction : row-reverse</h3>
<div class="container" style="flex-direction:row-reverse;">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
<div class="item">아이템4</div>
</div>
<h3>flex-direction : column</h3>
<div class="container" style="flex-direction: column">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
<div class="item">아이템4</div>
</div>
<h3>flex-direction : column-reverse</h3>
<div class="container" style="flex-direction: column-reverse">
<div class="item">아이템1</div>
<div class="item">아이템2</div>
<div class="item">아이템3</div>
<div class="item">아이템4</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 블록 요소 예시</title>
<style type="text/css">
.navbar{
display:flex;
border: 1px solid black;
background-color: #f8f9fa;
padding: 10px;
}
.nav-item{
margin:5px;
padding:10px;
background-color:lightblue;
color: white;
text-align: center;
border-radius:4px;
text-decoration: none;
}
.content1{
margin: 10px;
display:flex;
border: 1px solid gray;
padding: 10px;
}
.section{
height: 300px;
padding: 20px;
margin-top:20px;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- http://localhost:8080/demo1/demo_04.html -->
<h1>여기는 demo_04.html 파일입니다.</h1>
<br>
<h2>flex-direction: row (기본값)</h2>
<div class="navbar">
<a href="#home" class="nav-item">홈</a>
<a href="#about" class="nav-item">소개</a>
<a href="#services" class="nav-item">서비스</a>
<a href="#contact" class="nav-item">연락처</a>
</div>
<h2>flex-direction: column</h2>
<div class="navbar" style="flex-direction: column">
<a href="#home" class="nav-item">홈</a>
<a href="#about" class="nav-item">소개</a>
<a href="#services" class="nav-item">서비스</a>
<a href="#contact" class="nav-item">연락처</a>
</div>
<div class="section" id="home">
<h2>홈 섹션</h2>
<p>여기는 홈 섹션 영역입니다.</p>
</div>
<div class="section" id="about">
<h2>소개 섹션</h2>
<p>여기는 소개 섹션 영역입니다.</p>
</div>
<div class="section" id="services">
<h2>서비스 섹션</h2>
<p>여기는 서비스 섹션 영역입니다.</p>
</div>
<div class="section" id="contact">
<h2>연락처 섹션</h2>
<p>여기는 연락처 섹션 영역입니다.</p>
</div>
</body>
</html>728x90
반응형
'HTML,CSS > CSS' 카테고리의 다른 글
| [CSS] 7. 주축 방향 정렬 Justify-content (0) | 2024.07.02 |
|---|---|
| [CSS] 6. flex-wrap (0) | 2024.07.02 |
| [CSS] 3. 박스 모델 (0) | 2024.07.01 |
| [CSS] 2. 주요 선택자와 캐스캐이딩의 개념 (0) | 2024.04.24 |
| [CSS] 1. 스타일이란? (0) | 2024.04.23 |
