flexbox
•
flexbox는 가로 or 세로에 정해둔 방향을 기준으로 프로퍼티를 정렬함
1.
flex container(부모 요소) ← display:flex; 추가
•
flex-direction : flex 컨테이너 안의 item들의 방향을 정함, 디폴트 값-row
•
flex-wrap : flex 아이템이 flex 컨테이너를 벗어났을 때 줄을 바꾸는 속성
•
justify-content : flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정함
•
align-items : flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬하는 방법을 정함, baseline(글꼴기준)
•
align-content : flex=direction으로 정해진 방향을 기준으로 수직으로 여러줄인 item을 정렬하는 방법을 정함(justify랑 비슷)
2.
flex item(자식 요소)
•
flex-grow : flex 아이템의 확장과 관련된 속성, 기본 0
•
flex-shrink : flex 아이템의 축소와 관련된 속성, 기본 1
•
flex-basis : flex 아이템의 기본 크기를 결정함, 기본 auto, 단위 꼭 써야함
•
flex : 축약형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지수입니다.</title>
<style>
* { box-sizing: border-box;}
body {margin: 0;}
a{text-decoration: none;}
a:link, a:visited, a:active {color: inherit;}
header {background-color: skyblue;}
nav {background-color: pink;}
aside{background-color: lightgray;}
footer{background-color: lightcoral;}
#main {
display: flex;
}
.content {
flex: 70%;
}
.aside {
flex: 30%;
}
.navbar {
display: flex;
justify-content: flex-end;
}
.header {
padding: 30px;
text-align: center;
}
.navbar a {
padding: 8px;
margin-right: 20px;
}
.navbar a:hover {
color: black;
background-color: white;
}
.content, .aside{
padding: 40px;
}
footer {
padding: 30px;
text-align: center;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#main {
flex: 1;
}
.foot {
flex-shrink: 0;
}
</style>
</head>
<body>
<header class="header">
<h1>My Webpage</h1>
</header>
<nav class="navbar">
<a href="">Home</a>
<a href="">About</a>
<a href="">Q&A</a>
</nav>
<div id="main">
<article>
<h2>About me</h2>
<h3>Introduce :</h3>
<p>how are you? I'm fine thank you and you?</p>
</article>
<aside>
<h2>AD</h2>
<p>how are you? I'm fine thank you and you?</p>
</aside>
</div>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>
HTML
복사