위치 정렬 - flex item

flex containe의 프로퍼티를 배웠다면 이제 flex item 차례이다. flex item의 프로퍼티는 display: flex 가 적용된 부모 요소의 자식 요소에만 사용할 수 있다. 

 

 

flex-grow

---

flex-grow는 이름 그대로 flex item의 확장과 관련이 있다. 단위 없는 숫자 값(비율)을 사용하며 기본값은 0이다. 값이 0일 경우 flex container가 커져도 flex item의 크기는 커지지 않고 원래 크기를 유지한다. 하지만 값이 1 이상일 경우 flex item의 원래 크기와 상관없이 flex container를 채우기 위해 flex item도 커지게 된다.

<div class="container">
	<div class="item">1</div>
	<div class="item none">0</div>
</div>
<div class="container">
	<div class="item">1</div>
	<div class="item">1</div>
	<div class="item">1</div>
</div>
<div class="container">
	<div class="item">1</div>
	<div class="item target">2</div>
	<div class="item">1</div>
</div>

.container {
	background-color: skyblue;
	height: 36px;
	padding: 12px;
	margin-bottom: 16px;
	display: flex;
}
.item {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fff;
	background: pink;
	flex-grow: 1;
}
.target {
	background-color: lemonchiffon;
	flex-grow: 2;
}
.none {
	background-color: grey;
	flex-grow: 0;
}

flex-grow의 값이 1 이상인 flex item이 여러 개라면 flex-grow 값에 따라 flex container의 크기를 나눠 가진다. 

flex-grow 크기는 비율이기 때문에 flex container의 크기가 커지거나 줄어들면 동일한 비율로 크기가 커지거나 줄어든다. 

 

 

 

flex-shrink

---

flex item의 축소와 관련이 있다. 0과 정수(비율)를 사용하며 기본값은 flex-grow와 달리 1이다. 속성값이 0일 경우 flex container 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기를 유지한다. 

<div class="container none">
	<div class="item">0</div>
	<div class="item">0</div>
	<div class="item">0</div>
</div>
<div class="container active">
	<div class="item">1</div>
	<div class="item">1</div>
	<div class="item">1</div>
</div>
<div class="container target">
	<div class="item">1</div>
	<div class="item">3</div>
	<div class="item">5</div>
</div>

.container {
	background-color: skyblue;
	height: 36px;
	padding: 12px;
	margin-bottom: 16px;
	display: flex;
	width: 400px;
}
.item {
	/* 텍스트 가운데 정렬을 위한 스타일*/
	width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fff;
	background: pink;
}
.none > .item {
	flex-shrink: 0;
}
.active > .item {
	flex-shrink: 1;
}
.target > .item:first-child {
	flex-shrink: 1;
}
.target > .item:nth-child(2) {
	flex-shrink: 5;
}
.target > .item:last-child {
	flex-shrink: 3;
}

.container {
	background-color: skyblue;
	height: 36px;
	padding: 12px;
	margin-bottom: 16px;
	display: flex;
}

 

 

 

flex-basis

---

flex-basis는 flex item의 기본 크기를 결정하며, 기본값은 auto이다. 단위로는 모든 크기 단위를 사용할 수 있는데, auto로 값이 설정되면 원래 컨텐츠의 크기가 할당된다. 

 

flex-basis: auto

flex-basis의 값이 auto라면 각 flex item의 크기가 flex-basis로 할당된다. 그리고 남은 크기를 flex-grow에 따라 2:1의 비율로 나눠 가진다.

<div class="container auto">
	<div class="item grow">goorm</div>
	<div class="item">EDU</div>
	<div class="item">Flex</div>
</div>
<div class="container none">
	<div class="item grow">goorm</div>
	<div class="item">EDU</div>
	<div class="item">Flex</div>
</div>
<div class="container numb">
	<div class="item grow">goorm</div>
	<div class="item">EDU</div>
	<div class="item">Flex</div>
</div>

.container {
	background-color: skyblue;
	height: 48px;
	padding: 12px;
	margin-bottom: 16px;
	display: flex;
	width: 400px;
}
.item {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fff;
	background: pink;
	flex-grow: 1;
}
.grow {
	flex-grow: 2;
}

첫째 줄의 .item에 flex-basis:auto를 할당한다. flex-basis의 기본값이 auto이니 변화가 없을 것이다.

.auto > .item {
	flex-basis: auto;
}

 

flex-basis: 0

flex-basis의 값이 0이면 flex-grow에 따라 각 flex item의 크기가 2:1:1 비율로 나눠진다.

.none > .item {
	flex-basis: 0;
}

개발자 도구로 찍어보면 goorm은 200px, 나머지 두 flex item은 100px로, flex-grow에 따라 2:1:1로 할당되었음을 확인할 수 있다.

 

 

flex-basis: 100px

flex-basis의 값이 100px인 경우(수치를 값으로 가지는 경우) 각 컨텐츠마다 100px을 제외, 즉 총 300px에 해당하는 값을 제외한 크기를 2:1:1의 비율로 나눠가진다.

아래와 같이 세번째 줄의 .item에 flex-basis:100px을 추가해 보자.

.numb > .item {
	flex-basis: 100px;
}

 

개발자 도구로 찍어보면 100px을 2:1:1로 나눠 갖기 때문에 goorm의 경우 100px + 50px, 남은 flex item의 경우 각각 100px + 25px로 나눠갖게 된다.

 

 

 

flex

---

flex는 flex-grow, flex-shrink, flex-basis를 한번에 설정할 수 있는 축약형이다. flex를 작성할 때는 flex-grow, flex-shrink, flex-basis 의 순서로 값을 넣어야한다.

flex-grow: 1;
flex-shrink: 0;
flex-basis: 400px;
/* 위와 아래는 동일한 코드 */
flex: 1 0 400px;

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
/* 위와 아래는 동일한 코드 */
flex: 1;

flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
/* 위와 아래는 동일한 코드 */
flex: 0;