1. flex-grow : 숫자(정수)
--> 플렉스 자식요소의 증가 너비 비율을 설정
==> 대부분 flex:1; 이렇게 사용한다 grow는 너비가 완전 정확한거는 아니다
grow는 활용도가 높지는 않다.
2. flex-shrink : 숫자(정수)
실전 제작에 활용도가 많이 떨어진다.
숫자가 클수룩 너비가 더 줄어진다.
플렉스 자식요소의 감소 너비 비율을 설정
3. flex-basis: 숫자, px , % 등
플렉스 자식요소의 공간 배분 전 기본 너비 설정
기본값 : auto
노트북에는 빨, 초, 파
태블릿에서는 위에 사진처럼 나오게하기 위해서
폰은 빨, 초, 파 한줄에 한 색상으로 출력하려면
자식요소
1. flex : 숫자(정수) ==>플렉스 자식 요소의 너비를 상대적으로 설정
응용문제!!
1. 아래 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/flex/css/style.css">
</head>
<body>
<div class="container">
<div class="box">
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
</div>
</div>
</body>
</html>
--
.container{display: flex;}
.box{
border: 3px solid red;
display: flex;
flex: 1;
}
.box div{
height: 200px;
flex: 1;
}
.box div:nth-child(1){
background-color: yellow;
}
.box div:nth-child(2){
background-color: yellowgreen;
}
--------------------------------------
ㅎㅎㅎㅎㅎ
반응형 하는거 진짜 오랜만이네 ;;
반응형 할때 meta:vp 하기 !
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body{
margin: 0;
display: flex;
justify-content: center;
}
.container{
border: 1px solid #000;
width: 1200px;
}
header{background-color: tomato;
padding: 2em;
text-align: center;
}
section{display: flex;
}
section article{
border: 1px solid #000;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.left{flex: 1;
background-color: yellow;
}
.main{flex: 4;
background-color: gray;
}
.right{flex: 1;
background-color: green;
}
footer{padding: 2em;
text-align: center;
background-color: aquamarine;
}
@media (max-width:768px){
.container{
width: 100%;
}
section{
flex-direction: column;
}
.left{order: 2;}
.main{order: 1;
padding: 20px;
}
.right{order: 3;}
}
아래 css 참고하기~~
