시작전!
reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
CSS
복사
개요
CSS Layout - Flex
•
일반명사
구부리다
•
고유명사
웹 페이지에서 상자들을 배치 할 수 있는 CSS 기법
Container, Item
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
HTML
복사
.wrap{
display : flex;
}
CSS
복사
배치 방향의 설정 Flex Direction
•
Flex Item이 쌓이는 방향을 결정하는 속성
•
진행 방향과 교차 방향이 설정 된다.
.wrap{
display : flex;
flex-direction : row;
flex-direction : column;
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
}
CSS
복사
Flex Wrap
•
Flex Item이 더 이상 배치될 공간이 없을 경우 어떻게 줄 넘김을 진행할지
.wrap{
display : flex;
flex-wrap : wrap;
/* flex-wrap: nowrap;
flex-wrap: wrap-reverse; */
}
CSS
복사
메인축 방향 정렬
.wrap{
display : flex;
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}
CSS
복사
교차축 방향 정렬
.wrap {
display : flex;
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
}
CSS
복사
미니퀘스트
