[CSS] 5. Flex-direction 속성

2024년 07월 01일

Song hyun
작성자
2024.07.01.:52

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, JS > CSS' 카테고리의 다른 글

[CSS] 7. 주축 방향 정렬 Justify-content (0)	2024.07.02
[CSS] 6. flex-wrap (0)	2024.07.02
[CSS] 4. Flexbox (0)	2024.07.01
[CSS] 3. 박스 모델 (0)	2024.07.01
[CSS] 2. 주요 선택자와 캐스캐이딩의 개념 (0)	2024.04.24

다음 글이 없습니다.

이전 글이 없습니다.

[CSS] 5. Flex-direction 속성

'HTML,CSS, JS > CSS' 카테고리의 다른 글

티스토리툴바