Html&CSS/html5&css3
0304_html5/css3_display:flex - (3)형태잡기 flex-grow , flex-shrink:'숫자'
.Epona.
2020. 3. 5. 06:36
- 형태잡기
- 비율로 형태를 잡음
- 여백 없이 형태를 잡을 수 있음
flex-grow
-
section article { flex-grow: 1; flex-basis: 600px; flex-shrink: 1; }
- flex-grow:
- flex-shrink:
flex-shrink
-
section article { flex-grow: 1; flex-basis: 600px; flex-shrink: 1; }
- flex-grow:
- flex-shrink:
참고사이트: https://blog.naver.com/coding-/221394620200\
CSS3 [flex] flex-direction/justify-content/align-items/align-content/flex-wrap/flex-grow/flex-shrink
css3에서 요소들을 자유자재로 정렬시키는 속성으로 display: flex가 있어요 화면크기에 맞춰서 배치되므로...
blog.naver.com
https://cafe.naver.com/smartdw/380
flex
대한민국 모임의 시작, 네이버 카페
cafe.naver.com
---
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0304_css3_flex-4</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 안하고 작업*/
}
/* 비율로 크기 바꾸기: flex-shrink */
section article {
/*flex:1 ; 1# 넣은 후, flex:1 <----비율이 1:1:1 이됨 */
/*flex-basis: 300px; 같은 비율(300px)로 모양을 만들어 줌*/
flex-grow: 1; flex-basis: 600px; flex-shrink: 1;
}
.article_1{background-color: darkblue;
}
.article_2{background-color: darkgreen;
flex-shrink: 2
}
.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>