728x90
flex-grow(기본값: 0)
부모 영역에서 자식 요소들이 부모 영역에 여백이 있으면, 채우기 정도를 요소마다 설정할 수 있게 해주는 옵션이다.
기본값이 0이니까, 아무런 설정을 안 하면, flex로 한 부모 요소의 자식요소들은 빈 영역이 있어도 채우지 않는다.
flex-grow: 1로 설정한 자식요소는 flex의 부모 요소의 빈공간을 채운다.
flex-shrink(기본값: 1)
자식 요소들의 크기들이, 부모 요소보다 클 경우, 자식요소들의 크기를 부모 요소의 크기에 맞춰서 줄어드는 정도를 설정할 수 있게 해주는 옵션이다.
기본값이 1이므로, 자식요소들이 부모 요소의 크기를 넘어도, 자식요소들이 부모 요소 밖으로 튀어나오지 않는다.
만약, flex-shrink: 0으로 전부, 자식요소를 설정하고, 부모 요소 크기를 넘는다면, 부모 요소 밖으로 튀어나온다.
flex-basis(기본값: auto)
자식요소의 기본 크기값을 설장한다.
테스트 코드
<!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>Document</title>
</head>
<body>
<div
style="
border: 1px solid red;
height: 100vh;
display: flex;
flex-direction: column;
padding: 10px;
"
>
<div style="height: 60px; border: 10px solid black; flex-shrink: 0"></div>
<div style="border: 10px solid greenyellow; overflow: hidden">
<div style="overflow-y: auto; max-height: 100%">
<p style="height: 1000vh; background-color: aqua"></p>
</div>
</div>
<div style="height: 170px; border: 10px solid blue; flex-shrink: 0"></div>
</div>
</body>
</html>728x90
'CSS' 카테고리의 다른 글
| [CSS] 색깔있는 이미지 회색으로 처리하기 (0) | 2023.02.25 |
|---|---|
| [CSS] transition과 transform을 함께 사용할 때, transition이 작동 안 하는 경우 (0) | 2023.01.11 |
| [CSS]textarea 세로로만 늘어나게 설정하기 (0) | 2022.10.01 |
| 프로젝트에 node-sass 없애고, dart-sass로만 운영하기 (0) | 2022.09.16 |
| [css] image 이미지 사진 비율 변형 안 하고 보이기 (0) | 2022.09.10 |
댓글