반응형
🚀 FLEX
기존의 TABLE 이나 Float를 사용하던 Layout을 간편하게 사용하기 위해 고안된 방법
📢 기본구조
<container>
<item></item>
<item></item>
<container>태그와 class값은 변해도 된다. 하지만 부모, 자식 관계는 꼭 유지해야 한다 !
📢 관련 속성
|
container
|
item
|
📢 Holy grail layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
}
header {
border-bottom: 1px solid gray;
}
footer {
border-top: 1px solid gray;
}
.content {
display: flex;
}
.content nav {
border-right: 1px solid gray;
}
.content aside {
border-left: 1px solid gray;
}
nav,
aside {
flex-basis: 200px;
flex-shrink: 0;
}
main {
flex-grow: 1;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
냠냠
</main>
<aside>
AD
</aside>
</section>
<footer>
https://taiyakee.tistory.com
</footer>
</div>
</body>
</html>
반응형