1. 개요

flex는 flex-wrap에서 wrap이나 nowrap을 통해 flex 내부 요소들이 부모 요소의 넓이를 초과했을 때 내부요소의 정렬을 구할 수 있다.
부모요소를 무시하고 가로로 정렬하거나(nowrap)
넓이가 부모요소를 초과하는 시점에서 줄바꿈이된다(wrap)

이때 flex를 사용할 때 내부 요소들의 개수와 상관없이 내부 요소들의 넓이를 부모요소에 맞게 조정할 수 있다.

예를들어 탭을 만들 때 같은 형태의 탭에 안에 들어가는 탭 개수만 달라질 수 있다.
이때 각각 탭에 퍼센트를 주어 넓이를 잡으면 탭 개수가 바뀔 때 넓이의 수치도 그에 따라 변경해주어야한다. 이때 grow를 사용하여 자동으로 넓이를 조정할 수 있다.

2. 사용법

1) flex-basis

flex-direction에 따라 넓이가 고정된다.
flex-direction이 column이면 세로 넓이, row면 가로 넓이가 지정된다.

.flexbox:nth-child(1) {
	flex-basis : 200px
}

위 상황일 때 flex가 가로 방향이면 width가 200px, 세로 방향이면 height가 200px이 된다.

그리고 설정한 flex-basis보다 내부 요소의 넓이가 더 크더라도 flex-basis기준으로 맞춰진다.

flex에서는 width보다 flex-basis가 우선 적용된다.

2) flex-grow

부모 요소의 넓이보다 자식 요소들의 모든 넓이가 적을 때 사용할 수 있다.

부모요소의 넓이 : 500px
자식 요소의 넓이 : 100px * 3 = 300px

<div class="wrap">
	<p class="box box1">box1</p>
    <p class="box box2">box2</p>
    <p class="box box3">box3</p>
</div>

.wrap {
	width:500px
    display:flex
    flex-direction:row
    flex-wrap:nowrap
}

.box {
	width : 100px
}

.box1 {
	flex-grow:2
}
.box 2 {
	flex-grow:3

여기서 각 box의 넓이가 100px이므로 총 넓이는 300px이 된다.
그러면 남은 넒이는 200px이 되는데 이 남은 200px의 넓이를 flex-grow가 나눠 먹는다.

혼자 1일 때는 혼자 남은 200px을 다 먹게 되고 여러 flex-grow가 있으면 비율에 맞게 나눠 가진다.

위 예시에서는 200px을 2:3으로 나눠가지게 되며
box1은 80px, box2는 120px을 가지게 되어
box1은 총 180px, box2는 220px을 가지게 된다.

3) flex-shrink

shrink : 쪼그라들다

grow와 반대로 초과된 넓이를 줄여 넣는다

.wrap {
	width:500px
    display:flex
    flex-direction:row
    flex-wrap:nowrap
}

.box {
	width : 200px
}

.box1 {
	flex-shrink:2
}
.box2 {
	flex-shrink:3
}    
.box3 {
	flex-shrink : 0
}

위와 같은 상황은 부모 넓이 500px 각 자식 요소들의 넓이 200px, 총 600px로 100px이 초과된다.
이 100px을 가지고 shrink의 비율에 따라 크기가 줄어든다.

box1은 40px만큼 줄어들어 160px을 가지게 된다.
box2는 60px만큼 줄어들어 140px을 가지게 된다.
box3는 아무일도 일어나지 않는다.

만약 한곳에서만 flex-shrink:1을 주면 그 한놈이 다 가져간다.

참고 flex : 1

flex : 1은

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%

이런 뜻을 지니고 있다. 위에서 소개한 세가지 모든 요소가 기본값이다.
이는 내부 요소가 여러개일 때 모두 같은 넓이를 가지게 된다.

부모의 넓이가 얼마인지 상관없이 부모의 넓이에 같은 지분을 차지하게 된다. 이는 내부 요소의 개수나 부모 넓이에 따른 영향을 적게 받게 된다.