flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다.
대부분의 경우, flex의 값에는 auto, initial, none이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요.
기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않습니다. min-width나 min-height 값을 지정해 바꿀 수 있습니다.
1. 구문
/* Keyword values */
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, length or percentage: flex-basis */
flex: 10em;
flex: 30%;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;2. 값
initial
아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. flex: 0 1 auto와 동일합니다.
auto
아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. flex: 1 1 auto와 동일합니다.
none
아이템 크기가 각각의 width와 height 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. flex: 0 0 auto와 동일합니다.
flex-grow
플렉스 아이템의 flex-grow를 지정합니다. 여백을 분배하는 정책을 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 0입니다.
flex-shrink
플렉스 아이템의 flex-shrink를 지정합니다. 여백을 각출하는 정책을 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 1입니다.
flex-basis
플렉스 아이템의 flex-basis를 지정합니다. 자식의 기본 크기를 지정합니다. 0을 지정하려면 <flex-grow> 또는 <flex-shrink>로 읽히지 않도록 단위를 붙여야 합니다. 생략 시 기본값은 auto입니다.
3. 초기값
flex-grow:0flex-shrink:1flex-basis:auto|
4. 예시코드(tailwind)
*`flex-shrink`는 `flex-shrink: 1`을 의미
*`flex-grow`는 `flex-grow: 1`을 의미
*`basis`는 `flex-basis`를 의미하되 1 당 4px
<main className='flex h-[300px] w-full flex-row border border-solid border-primary'>
<div
className='flex-shrink-0 flex-grow-0 basis-40 bg-green-500'
>
{width[0]}
</div>
<div
className='flex-shrink flex-grow-[2] basis-40 bg-blue-500'
>
{width[1]}
</div>
<div
className='flex-shrink-0 flex-grow basis-40 bg-red-500'
>
{width[2]}
</div>
</main>
flex-grow 0 2 1
여백 있을 때 공간 차지
flex-shrink 0 1 0
중간 파란색 div는 flex-shrink가 1이기 때문에 100% 줄어들 수 있고, 나머지(연두, 빨강) div들은 0이기 때문에 여백이 부족해도 수축하지 않습니다.
5. flex-wrap
여백이 없을 때 줄바꿈 정책을 지정합니다.
각 div는 160px입니다. 기기 툴바 전환을 통해서 500px보다 밑으로 줄여보겠습니다.
아래와 같이 flex-basis의 총합 크기를 만족시키지 못하면 제일 마지막의 요소가 밑(교차축)으로 내려가게 됩니다. 현재 주축 방향(justify-contents)에 따라서 교차축(align-items)이 다르기 때문에 flex-direction: row; 일 때는 아래로 flex-direction: column; 일 때는 오른쪽으로 이동합니다.
부록
1. display: flex를 주면 해당 요소가 block이 된다 🤔❓
정답입니다.display: flex를 주게 되면 주변 요소들이 해당 요소를 block요소처럼 여깁니다.
그 증거들을 보겠습니다.
실험할 코드
<!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>
.box {
width: 100px;
height: 100px;
}
.upper {
height: 100px;
margin-bottom: 100px;
background-color: #ba55d3;
}
span {
/* display: flex; */
margin-top: 140px;
}
.item1 {
background-color: red;
}
.item2 {
background-color: blue;
}
.item3 {
background-color: green;
}
.item4 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="upper"></div>
<span>
asdf
<div class="box item1"></div>
<div class="box item2"></div>
<div class="box item3"></div>
<div class="box item4"></div>
</span>
</body>
</html>블록 요소를 담아도 inline 요소는 inline요소인 것은 변함 없습니다.
그래서 margin-block을 가질 수 없습니다.
그런데 이 때 span 태그에 flex를 주면 span 태그는 마치 block처럼 행동하여 margin-block을 가질 수 있게 됩니다. 마찬가지로 block 요소의 특징 중 하나인 마진상쇄 현상도 발생합니다.
span {
display: flex;
margin-top: 140px;
}
