- 형태잡기
-가로 세로 값을 각각 다 지정해주지 않아도 형태를 만들 수 있음
flex: 1
-
section article { flex:1;
}
- section article 영역 내부에 있는 개별 콘텐츠들을 1:1 의 비율로 만들어 줌
▼ 코드 보기
<style>
*{margin: 0; padding: 0; box-sizing: border-box }
#wrapper{ width: 1280; height: auto; position:relative;
margin: 0 auto; text-align: center;}
header{width: 1280px; height:100px; position: relative; background-color: wheat }
footer{width: 1280px; height:100px; position: relative; background-color: brown}
/*display-flex*/
section{width: 1280px; height:300px; position: relative;
display:flex; /* #1 */
}
section article {
flex:1 ; /* #2 */
}
.article_1{background-color: darkblue;
}
.article_2{background-color: darkgreen;
}
.article_3{background-color: darkmagenta;
}
</style>
</head>
<body>
<div id="wrapper">
<header>header</header>
<section>
<article class="article_1">article_1</article>
<article class="article_2">article_2</article>
<article class="article_3">article_3</article>
</section>
<footer>footer</footer>
</div>
</body>flex-basis: ;
-
section article { flex-basis :200px; }
- section article 영역 내부에 있는 개별 콘텐츠를 같은 비율 200px로 만들어 줌
-
.article_2 { flex-basis : 600px; }
- 개별 콘텐츠 요소의 값도 직접 지정할 수 있음
- 하나를 지정하면 지정 되지 않은 값은 section article에서 지정한 값이 상속됨(지정되어 있을 경우)
section article {
flex-basis: 200px; /* #1) 같은 비율(200px)로 모양을 만들어 줌*/
}
.article_1{background-color: darkblue;
}
.article_2{background-color: darkgreen;
flex-basis: 600px /* #2) 내가 값 지정<-가운데 크기만 600px가 되고 나머진 200px가 됨 */
}
.article_3{background-color: darkmagenta;
}
코드 전체▼
▼ 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0304_css3_flex-3</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<style>
*{margin: 0; padding: 0; box-sizing: border-box }
#wrapper{ width: 1280; height: auto; position:relative;
margin: 0 auto; text-align: center;}
header{width: 1280px; height:100px; position: relative; background-color: wheat }
footer{width: 1280px; height:100px; position: relative; background-color: brown}
/*display-flex*/
section{width: 1280px; height:300px; position: relative;
display:flex; /* 1# float 안하고 작업*/
}
section article {
/*flex:1 ; 1# 넣은 후, flex:1 <----비율이 1:1:1 이됨 */
flex-basis: 300px; /*같은 비율(300px)로 모양을 만들어 줌*/
}
.article_1{background-color: darkblue;
}
.article_2{background-color: darkgreen;
flex-basis: 600px /*내가 값 지정<---가운데 크기만 600px가 되고 나머진 300px가 됨 */
}
.article_3{background-color: darkmagenta;
}
</style>
</head>
<body>
<!--ie11 부터 지원 -->
<div id="wrapper">
<header>header</header>
<section>
<article class="article_1">article_1</article>
<article class="article_2">article_2</article>
<article class="article_3">article_3</article>
</section>
<footer>footer</footer>
</div>
</body>
</html>
EX_html5_0304_flex-3.html
0.00MB
