기초공사 (html,css,javascript)
flex 본문
// 좀더 정확히 알고싶어서 해본 예제
parent:400px로 두니 변화를 알수없으니 100%로 두었따.
예시를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex</title>
<style>
.parent {
width: 400px;
/* width:100%; */
display: flex;
/* border: 1px solid */
background-color:grey;
}
.parent div {
width: 100px;
height: 50px;
background: #ebebeb;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
text-transform: uppercase;
}
.grow {
flex-grow:1;
background:salmon;
}
.shrink div {
width: 200px;
}
.parent .basis {
flex-basis:180px;
/*flex-basis:50%;*/
}
.parent .box1 {
background-color:yellow;
}
.parent .box2 {
background-color:salmon;
}
.parent .box3 {
background-color:green;
/* flex-shrink:2; */
flex: 0 2 50%;
/* 부모너비의 50%에서 두배로줄어든다. */
}
</style>
</head>
<body>
<h1>flex</h1>
<h2>flex-grow</h2>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div class="grow">box3</div>
</div>
<h2>flex-shrink</h2>
<div class="parent shrink">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<h2>flex-basis</h2>
<div class="parent">
<div>box1</div>
<div>box2</div>
<div class="basis">box3</div>
</div>
<h2>flex</h2>
<div class="parent all">
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body>
</html>
</body>
</html>예시를 보자.
flexl-shrink는 기본값이 1이다.
설정을 안해줘도 화면사이즈가 줄어들면 각각 조금씩 축소 되어있다.
1:1:1이 된다.
부모너비가 400px이고 shrink는 200px씩 3개이므로 200px가 넘친다.
그 200px에 대해서 3등분하니 66.66px가 된다.
그래서 각 box1은 200px이니 200px - 66.66px 를 빼서 133.33px가 된다.
여기에서 box3을 flex-shrink:2로 두고싶다면??
1:1:2가되므로 box1과 box2는 4분의 1이 되고
box은 4분의 2가 된다.
box1,2는 200px에서 4분의 1(50px이다.)을 빼면 150px가되고.
box3은 200px에서 4분의 2이브로(100px)를 빼면 100px가 된다.
// 다른예제를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-color: powderblue;
height: 200px;
display: flex;
}
.item {
background-color: tomato;
color: #fff;
border: 1px solid #fff;
/* 균등하게 나눠갖는다.
flex-grow: 1;*/
/* 어떠한 여백도 없고. */
/* flex-grow: 0; */
}
.item:nth-child(1) {}
.item:nth-child(2) {
/*flex-basis: 200px;*/
/*위에 item이 0이고 flex-grow를 100을 주든..여백을 얘가 다 갖는다..
2만이 여백을 갖겠다고 했는데 이게 100이다. 혼자 다 갖는다.*/
/* flex-grow: 100; */
flex-basis: 50%;
flex-grow: 1;
flex-shrink: 0;
/*
flex-basis가 있어야 flex-shrink가 적용된다.
*/
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
이번엔 flex-basis:0과 flex-basis:100%차이를 보면.
flex-basis:0
- flex: 1 2 0%;는 같은 방식으로 동작하지만 초기 크기(flex-basis)가 부모 컨테이너의 너비의 0%로 설정됩니다. 즉, 해당 아이템의 시작점(초기 크기)가 없다고 볼 수 있습니다.
flex-basis:100%
- flex: 1 2 100%;는 flex 아이템이 남는 공간을 채우기 위해 확장되고(flex-grow: 1), 화면 크기가 줄어들 때 그 비율에 따라 줄어들도록(flex-shrink: 2) 설정하며, 초기 크기(flex-basis)를 부모 컨테이너의 너비의 100%로 설정하는 것을 의미합니다.
아래예제1. flexl-basis:100%일때.
2. flex-basis:0%일때
위의 예제를 기본으로 간단한 예제를 만들어보자.
box들을 1:1:2의 비율로 만들어보고 / hover이에는 2배로늘어나게 해보자.
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
/* width:400px;
width:100%; */
height:200px;
display:flex;
background-color:gray;
}
.box1 {
background-color:bisque;
/* flex:1 1 0%; */
flex:1;
}
.box2 {
background-color:blueviolet;
/* flex:1 1 0%; */
flex:1;
}
.box3{
background-color:salmon;
/*
flex: 2 1 0%;
*/
/* flex:1 1 0%; */
flex:1;
transition:0.5s;
}
.box3:hover {
flex:2 1 0%;
}
</style>
</head>
<body>
<!-- box1.2.3을 1:1:2 비율로 만들어보자. -->
<h1>flex-grow</h1>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>'css > flex-shrink grow' 카테고리의 다른 글
| flex-ex-생활코딩에서 연습 (0) | 2023.09.16 |
|---|
'css/flex-shrink grow' Related Articles
more
