CSS3 flex attribute test
테스트 참고 사이트 : http://umaar.github.io/css-flexbox-demo/
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex 속성의 효과를 보기 위해서는 부모 컨테이너의 display 속성이 flex 으로 설정되어야 한다
display : flex
flex 속성
flex 속성은 단축속성으로서 3개의 속성을 한번에 설정할 수 있으며 포함된 속성과 디폴트 값은 다음과 같다
flex-grow: 0
flex-shrink: 1
flex-basis: auto
각 구성 속성의 의미
The CSS flex-grow property specifies the flex grow factor of a flex item.
The CSS flex-shrink property specifies the flex shrink factor of a flex item.
The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item. The property determines the size of the content-box unless specified otherwise using box-sizing.
flex 속성의 설정 예
/* 0 0 auto */
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
flex 속성 사용 예
<style type="text/css">
#flex-container {
width:100%;
/* flexbox specific properties */
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container .flex-item {
border:1px solid #f00;
/* flexbox specific properties */
-webkit-flex: auto;
flex: auto;
}
</style>
<div id="flex-container">
<div class="flex-item">Flex Box 1</div>
<div class="flex-item">Flex Box 2</div>
</div>
flex: 1; 플렉스 컨테이너 내부의 요소들의 폭을 모두 동일하게 설정함
flex: 2; 다른 요소보다 2개 크게
flex: 20; 다른 요소보다 20배 크게
flex: 0 1 200px; 200px 보다 커질 수 없고 화면의 폭에 따라 작아질 수는 있다
- 0: flex-grow 속성
- 1: flex-shrink 속성
- 200px : 초기의 폭
flex: 0 1 100%; 초기에는 전체 영역을 차지하고 화면의 폭이 커지더라도 더 이상 커지지 않으며 화면 크기에 따라 작아질 수 있다
flex: 0 0 300px; 초기에 300픽셀을 차지하고 화면의 폭이 변경되더라도 커지거나 작아지지 않는다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> CSS Flex Test </title>
<style>
body {
margin:0px;
padding:0px;
text-align: center;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
-webkit-box-align: center; -moz-box-align: center; /* OLD… */
-ms-flex-align: center; /* You know the drill now… */
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center; -moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width:100%;
height:100%;
}
body > div {
border: 1px solid black;
flex-flow: row wrap;
/*min-width: 800px;*/
width: 1000px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*
-webkit-box-align: center; -moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;*/
/*align-items : center; */
/*justify-content:center;*/
}
body > div:nth-child(1) > header, nav, section, aside, footer {
background:#ccc; border-radius:7px; margin:5px; padding:20px;
}
body > div:nth-child(1) > header { order:1; height:100px; flex:0 1 100%; }
body > div:nth-child(1) > nav { order:2; flex:0 1 200px; }
body > div:nth-child(1) > section { order:3; min-height:250px; /*flex:1;*/ flex:1 0 200px; }
body > div:nth-child(1) > aside { order:4; flex:0 1 200px; }
body > div:nth-child(1) > footer { order: 5; height:100px; flex: 0 1 100%; }
</style>
</head>
<body>
<div>
<header>Header</header>
<nav>Navigation</nav>
<section>Section</section>
<aside>Aside Content</aside>
<footer>Footer</footer>
</div>
</body>
</html>
Holy Grail example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
-webkit-flex-flow: column;
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
</html>