[CSS] flex-direction 속성이란?

CSS

by 미로910 2024. 7. 1. 16:41

💡
주 축(main axis)과 교차 축(cross axis)
flex-direction: row, row-reverse, column, column-reverse

FlexBox의 두 개의 축

flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 하게 된다.

주축( main axis)의 방향과 교차축 (cross axis )의 방향을 결정하는 flex-direction 이라는 속성이 있다.

flex-direction의 기본값은 row입니다.

주축 방향(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향이다. flex-direction:row 인 경우는 주축이 수평이 되고 flex-direction:column인 경우는 주축이 수직 방향이 된다.
교차축 방향(cross axis ) : Flex container의 주축에 직각을 이루는 축으로 주축이 수평이며 교차축은 수직 방향이 된다.

flex-direction 속성이란?

flex-direction 속성은 주 축의 방향을 설정한다.

row: 아이템들을 수평으로 배치한다 (기본값).
row-reverse: 아이템들을 수평으로 배치하되, 반대 방향으로 배치한다.
column: 아이템들을 수직으로 배치한다.
column-reverse: 아이템들을 수직으로 배치하되, 반대 방향으로 배치한다.

1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인요소와패딩그리고마진</title>
<style type="text/css">
	.m-inline{
		background-color:lightgreen;
		padding: 10px;
		margin-top: 200px;
		margin-left: 20px;
		margin-right: 20px;
		border: 1px solid red;
		
	}
</style>
</head>
<body>
 	<!--  http://localhost:8080/demo1/  -->
    <h1>여기는 demo_01.html 파일입니다.</h1>
    <p>
    이 텍스트는 <span class="m-inline">인라인 요소 1</span>입니다.
    이 텍스트는 <span class="m-inline">인라인 요소 2</span>입니다.
    </p>
</body>
</html>

2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인블록 요소 예시</title>
<style type="text/css">
	.m-inline-block{
		display: inline-block;
		background-color: aqua;
		padding: 10px;
		margin: 10px;
		
	}
	
</style>
</head>
<body>
 	<!--  http://localhost:8080/demo1/demo_02.html  -->
    <h1>여기는 demo_02.html 파일입니다.</h1>
    <div class="m-inline-block">인라인 블록 요소1</div>
    <div class="m-inline-block">인라인 블록 요소2</div>
    
</body>
</html>

3

<!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_03.html  -->
    <h1>여기는 demo_03.html 파일입니다.</h1>
    <br>
    
    <h3>flex-directioon : row(기본값)</h3>
    <div class="container">
    	<div class="item">아이템1</div>
    	<div class="item">아이템2</div>
    	<div class="item">아이템3</div>
    </div>
    
     <h3>flex-directioon : 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>
    
     <h3>flex-directioon : 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>
    
     <h3>flex-directioon : 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>
    
    
</body>
</html>

4 - 앵커 태그를 사용하여 페이지 내 특정 위치로 이동할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 블록 요소 예시</title>
<style type="text/css">
    .navbar1{
        display:flex;
        border: 1px solid black;
        background-color: #f8f9fa;
        padding: 10px;
    }
    .nav-item1{
        margin:5px;
        padding:10px;
        background-color:lightblue;
        color: white;
        text-align: center;
        border-radius:4px;
        text-decoration: none;
    }
    .navbar2{
        display:flex;
        border: 1px solid black;
        background-color: #f8f9fa;
        padding: 10px;
        flex-direction: column;
    }
    .nav-item2{
        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 #000; 
    	
    }

</style>
</head>
<body>
    <!-- http://localhost:8080/demo1/demo_04.html -->
    <h1>여기는 demo_04.html 파일입니다.</h1>
    <br>
    
    
    
    <h2>flex-direction: row (기본값)</h2>
        <div class="navbar1">
            <a href="#home" class="nav-item1">홈</a>
            <a href="#about" class="nav-item1">소개</a>
            <a href="#services" class="nav-item1">서비스</a>
            <a href="#contact" class="nav-item1">연락처</a>
        </div>
        
     
    
    <h2>flex-direction: column</h2>
        <div class="navbar2">
            <a href="#home" class="nav-item2">홈</a>
            <a href="#about" class="nav-item2">소개</a>
            <a href="#services" class="nav-item2">서비스</a>
            <a href="#contact" class="nav-item2">연락처</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>