CSS - flex

프로그래밍/HTML & CSS 2021. 9. 23.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.flex-container {
	width: 350px;
	padding: 10px;
	margin: 30px;
	border: 3px dotted gray;
}
.flex {
	display: flex;
}
.inline-flex {
	display: inline-flex;
}
.box{
	width: 80px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 5px;
	border: 1px solid blue;
}
</style>

</head>
<body>

<h3>flex</h3>

<p>플렉스 레이아웃을 적용하지 않은 경우</p>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>display:flex, 수직으로 쌓는다.</p>
<div class="flex-container flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<div class="flex-container flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>display:inline-flex, 수평으로 쌓는다.</p>
<div class="flex-container inline-flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<div class="flex-container inline-flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

</body>
</html>

flex는 요소나 내용의 위치를 조절 할 수 있게 해준다.

inline 방식으로도 지정이 가능해서 한줄에 표현도 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.flex-container {
	width: 350px;
	padding: 10px;
	margin: 30px;
	border: 3px dotted gray;
	
	display: flex;
}

.row { flex-direction: row; }
.row-reverse { flex-direction: row-reverse; }
.column { flex-direction: column; }
.column-reverse { flex-direction: column-reverse; }

.box{
	width: 80px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 5px;
	border: 1px solid blue;
}
</style>

</head>
<body>

<h3>flex-direction : 아이템 주측 방향 설정</h3>

<p>기본값</p>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>flex-direction:row</p>
<div class="flex-container row">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>flex-direction:row-reverse</p>
<div class="flex-container row-reverse">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>flex-direction:column</p>
<div class="flex-container column">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>flex-direction:column-reverse</p>
<div class="flex-container column-reverse">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>


</body>
</html>

그리고 방향의 설정도 가능하다.

flex-direction 명령어를 통해서 row 방향 column방향

각 방향들의 역순 배치도 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.flex-container {
	width: 200px;
	padding: 10px;
	margin: 20px;
	border: 3px dotted gray;
	
	display: flex;
}

.nowrap { flex-wrap: nowrap; }
.wrap { flex-wrap: wrap; }

.box{
	width: 60px;
	height: 100%;
	padding: 10px;
	text-align: center;

	border: 1px solid blue;
}
</style>

</head>
<body>

<h3>flex-wrap:강제로 한줄로 배치할 것인지, 영역을 벗어나지 않고 여러 줄로 배치할 것인지 지정</h3>

<p>기본값</p>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
	<div class="box">D</div>
	<div class="box">E</div>
	<div class="box">F</div>
	<div class="box">G</div>
	<div class="box">H</div>
	<div class="box">I</div>
</div>
<hr>

<p>nowrap</p>
<div class="flex-container nowrap">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
	<div class="box">D</div>
	<div class="box">E</div>
	<div class="box">F</div>
	<div class="box">G</div>
	<div class="box">H</div>
	<div class="box">I</div>
</div>
<div class="flex-container nowrap">
	<div class="box">ITEM A</div>
	<div class="box">ITEM B</div>
	<div class="box">ITEM C</div>
	<div class="box">ITEM D</div>
	<div class="box">ITEM E</div>
	<div class="box">ITEM F</div>
</div>
<hr>

<p>wrap</p>
<div class="flex-container wrap">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
	<div class="box">D</div>
	<div class="box">E</div>
	<div class="box">F</div>
	<div class="box">G</div>
	<div class="box">H</div>
	<div class="box">I</div>
</div>
<div class="flex-container wrap">
	<div class="box">ITEM A</div>
	<div class="box">ITEM B</div>
	<div class="box">ITEM C</div>
	<div class="box">ITEM D</div>
	<div class="box">ITEM E</div>
	<div class="box">ITEM F</div>
</div>
<hr>

</body>
</html>

wrap 기능을 이용하면 영역에 맞추거나 영역을 벗어나게 배치도 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.parent {
	width: 500px; height: 350px;
	border: 1px solid blue;
	
	display: flex;
	align-items: center; /* 수직 가운데. display: flex 에서 가능 */
	justify-content: center; /* 주축 정렬. display: flex 에서 가능 */
}
.box {
	width: 350px;
	border: 1px solid orange;
	background: yellow;
}

h3 { text-align: center; }
</style>
</head>
<body>

<div class="parent">
	<div class="box">
		<h3>display:flex를 이용한 수직 수평 가운데 정렬</h3>
	</div>
</div>

</body>
</html>

안에 내용물은 h3태그로 원래 이걸 수평과 동시에 수직을 정렬하기에는 복잡한 방법들을 사용했다.

하지만 display:flex를 이용하면 코드 몇줄로 설정이 가능하다.

display:flex; = flex 방식을 사용하겠다.

align-items: center; = display가 flex 일때만 사용 가능한 옵션으로 수직의 가운데로 정렬 시킨다.

justify-content: center; = 마찬가지로 flex일때만 사용 가능하고 주축의 가운데로 정렬 시킨다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

header {
	height: 55px; padding: 1rem; color: white; background: darkblue;
	font-weight: bold;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	position: fixed;
	top: 0; left:0; right:0;
	
}

nav > span {
	cursor: pointer;
	padding: 10px;
}

main {
	min-height: 1100px;
	padding-top: 70px;
}

footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

</style>
</head>
<body>


<header>
	<h1>스터디</h1>
	<nav>
		<span>메뉴-1</span>
		<span>메뉴-2</span>
		<span>메뉴-3</span>
	
	</nav>
</header>

<main>

	<h3>메뉴를 상단에 고정</h3>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	
</main>

<footer>

	<p>푸터 영역</p>
	
</footer>


</body>
</html>

fixed와 flex를 활용한 예제

- position: fixed;
top: 0; left:0; right:0;

의 의미는 포지션은 고정으로하고 위 양 옆을 0으로 줘서 딱 붙이겠다는 뜻

사진처럼 스크롤바가 보이는 끝까지 붙이는게 right: 0 의 옵션

justify-content: space-between; = 첫번째 자식은 왼쪽 두번째 자식은 맨 오른쪽에 붙이고 나머지는 가운데에 두겠다는 뜻

header의 자식인 h1 태그가 맨 첫번째라서 맨 왼쪽

두번째 자식인 nav를 맨 오른쪽에 배치한 모습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>

header {
	
	position: fixed;
	top: 0; left: 0; right: 0;
	
	color: white;
	background: darkblue;
	

}

main{
	padding-top: 50px;
	min-height: 1500px;
}

footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

header > nav > ul > li{
	list-style: none;
	display: inline-block;
}

header > nav > ul > li > a{
	display: block;
	text-decoration: none;
	padding: 10px 20px;
	color: white;
	font-weight: 700;
	
}

header > nav > ul > li > a > hover{
	background: #03f;
	font-weight: 700;
}


</style>
</head>
<body>


<header>
	<nav>
		<ul>
			<li><a href="#">홈</a></li>
			<li><a href="#">메뉴-1</a></li>
			<li><a href="#">메뉴-2</a></li>		
		</ul>
	
	</nav>

</header>

<main>
	<h3>display : flex를 사용하지 않고 메뉴바를 화면에 고정.</h3>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	
</main>

<footer>
	<p>푸터 영역</p>
</footer>




</body>
</html>

다른 예제

저작자표시

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS - 이미지 2개로 효과주기 (버튼) (0)	2021.09.23
CSS - grid 그리드 (0)	2021.09.23
CSS - 영역 관련 (0)	2021.09.23
CSS - float 개요 (0)	2021.09.22
CSS - margin 마진 겹침 현상 (0)	2021.09.22

ABOUT ME

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바