display flex 를 이용한 footer 화면 바닥에 붙이기

사이트 설계 할 때 부족한 컨텐츠로 footer가 올라와 여백이 보이는 경우가 있는데 

이때 display flex 속성을 이용하여 브라우저 화면하단에 footer를 붙이도록 해본다 .

 

 

<div id="warp">
	<header id="header">
		<h1>헤더</h1>
	</header>

	<main id="main">
		<h2>메인</h2>
	</main>

	<footer id="footer">
		<h2>푸터</h2>
	</footer>
</div>

 

 

 

	#wrap {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	#header {
		flex: 0 0 auto;
	}

	#main {
		flex: 1 1 auto;
	}

	#footer {
		flex: 0 0 auto;
	}

 

 

 

.item{
	flex: 1 1 auto /* 증가너비 감소너비 기본너비 */
}

 

 

 

이런 코드블럭 테마가 이쁘지 않다 ...

나중에 수정해야겠따 .

---

참고

https://heropy.blog/2018/11/24/css-flexible-box/

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox