flex-basis, flex-grow, flex-shrink
- item이 차지하는 크기(row 방향일 때에는 width, column 방향일 때에는 height)를 container의 크기 변화에 따라 바뀔 수 있도록 설정이 가능
- 기본적으로 item의 content box가 차지하는 크기를 제외한 여백이 늘어나거나 줄어드는 방식임
Flex Grow
flex-grow 예시
- flex-grow 속성은 기본적으로 0으로 설정되어있으며, 각 item마다 값을 주게 되면 container내의 flex-grow 값의 합에 대한 비율을 유지하면서 늘어남
- 실제로 늘어나는 부분은 item의 내용이 차지하는 크기(예시에서 텍스트가 차지하는 크기)를 제외한 나머지 여백임
Flex Shrink
flex-shrink 예시
- flex-shrink 속성은 기본적으로 1으로 설정되어있으며, 각 item마다 값을 주게 되면 줄어들 때 비율을 유지하면서 줄어듦
- flex-grow처럼 설정된 숫자만큼의 비율을 유지하면서 줄어든다고 생각할 수 있지만, flex-shrink에서는 여백이 줄어드는 비율을 의미하므로, 숫자가 큰 쪽이 더 빨리 줄어듬
Flex Basis
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Title</title>
</head>
<body>
<div class="container">
<div class="box">Start !</div>
<div class="box">Start !</div>
</div>
</body>
<script>
const box = document.getElementsByClassName('box');
let firstBoxPrevWidth = box[0].getBoundingClientRect().width;
let secondBoxPrevWidth = box[1].getBoundingClientRect().width;
window.addEventListener('resize', function () {
const firstBoxCurrentWidth = box[0].getBoundingClientRect().width;
const secondBoxCurrentWidth = box[1].getBoundingClientRect().width;
if (firstBoxCurrentWidth > firstBoxPrevWidth) {
box[0].innerText = `Growing\nSize: ${Math.round(firstBoxCurrentWidth)}`;
} else if (firstBoxCurrentWidth < firstBoxPrevWidth) {
box[0].innerText = `Shrinking\nSize: ${Math.round(firstBoxCurrentWidth)}`;
} else {
box[0].innerText = `Basis\nSize: ${Math.round(firstBoxCurrentWidth)}`;
}
if (secondBoxCurrentWidth > secondBoxPrevWidth) {
box[1].innerText = `Growing\nSize: ${Math.round(secondBoxCurrentWidth)}`;
} else if (secondBoxCurrentWidth < secondBoxPrevWidth) {
box[1].innerText = `Shrinking\nSize: ${Math.round(secondBoxCurrentWidth)}`;
} else {
box[1].innerText = `Basis\nSize: ${Math.round(secondBoxCurrentWidth)}`;
}
firstBoxPrevWidth = firstBoxCurrentWidth;
secondBoxPrevWidth = secondBoxCurrentWidth;
});
</script>
</html>
flex-basis 예시(내부의 텍스트는 이해를 돕기 위해 작성자가 임의로 만든 javascript코드)
- flex-basis는 item이 grow나 shrink 속성에 의해 변하기 전에 가지는 기본 크기
- basis 속성과 grow : 0을 설정하면 max-width처럼 사용 가능
- basis 속성과 shrink : 0을 설정하면 min-width처럼 사용 가능
Flex shortcut
- flex shortcut을 이용하여 flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있음.