고정 헤더 영역
상세 컨텐츠
본문
반응형
레이아웃 : flex (생활코딩)
flex가 도입된 배경
-- Table, Position 등 레이아웃을 더 쉽게 짜기 위한 시행착오들...
flex : container (그릇), item(내용물)이 필요.
ex) 1 (출처 : 생활코딩)
<!doctype>
<html>
<head>
<style>
.container{
background-color: powderblue;
height:200px;
display:flex;
flex-direction:row;
}
.item{
background-color: tomato;
color:white;
border:1px solid white;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
item은 contain에 따라 작아지기도 커지기도 한다.
item 에게 중요한 속성 3가지.
1. basis : 크기를 지정.
2. grow : flex-grow 에서 item이 컨테이너를 나눠갖는 비율
3. shrink : flex-shrink에서 화면이 작아지거나 줄어드는 비율 설정.
Holy Grail layout. (유래 : 성배를 찾기 위한 노력 비유...)
<header>
<section> <nav>, <main>, <aside>
<footer>
보다 쉬운 레이아웃.
<!doctype>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
display: flex;
flex-direction: column;
}
header{
border-bottom:1px solid gray;
padding-left:20px;
}
footer{
border-top:1px solid gray;
padding:20px;
text-align: center;
}
.content{
display:flex;
}
.content nav{
border-right:1px solid gray;
}
.content aside{
border-left:1px solid gray;
}
nav, aside{
flex-basis: 150px;
flex-shrink: 0;
}
main{
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>
Lorem ipsum
</main>
<aside>
AD
</aside>
</section>
<footer>
<a href="https://opentutorials.org/course/1">홈페이지</a>
</footer>
</div>
</body>
</html>
align-items : 수직
justify-items : 수평
반응형
'코딩' 카테고리의 다른 글
| 레이아웃 : float (0) | 2017.02.22 |
|---|---|
| 레이아웃 : media query (0) | 2017.02.22 |
| 레이아웃 : 포지션 (0) | 2017.02.19 |
| 레이아웃 : 마진겹침 현상 (0) | 2017.02.19 |
| 레이아웃 : box-sizing (생활코딩) (0) | 2017.02.19 |
