CSS의 레이아웃 기능인 Flex!
그중에서 헷갈리는 flex-basis, flex-grow, flex-shrink 속성의 개념을 정리해보고자 한다.
1. flex-basis
Flex Item의 크기를 설정한다. 이때 axis 방향으로의 크기를 설정한다.
즉 위의 상태에서 box에 flex-basis 값을 준 경우 box의 좌우 너비가 변하고, flex-direction: column인 경우 높이가 변한다.
이때, flex-shrink 속성을 0으로 설정하지 않는다면 내부 컨텐츠에 따라 유연한 크기를 갖는다.
초기값(default value)은 auto이다.
-
Flex Item의 flex-basis가 auto인 경우 width, height 속성이 우선한다.
-
Flex Item의 flex-basis가 auto가 아닌 경우, flex-basis 속성이 우선한다.
.box:nth-child(1) {
flex-basis: 200px;
}
.box:nth-child(2) {}
2. flex-grow
Flex Container에 공간이 남을 경우 Flex Item의 flex-basis 크기가 얼마나 더 할당 가능한지 나타내는 속성이다.
초기값(default value)은 0이고, 음수로의 설정은 불가능하다.
.box:nth-child(1) {}
.box:nth-child(2) {
flex-grow: 1;
}
box2 클래스에만 flex-grow: 1; 속성을 준 결과 Flex Container에 axis 방향으로 공간이 남았을 때 box2의 크기가 늘어나서 남은 공간을 차지하게 되었다.
.box {
background-color: pink;
border: 2px solid black;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
flex-grow: 1;
}
.box:nth-child(1) {
flex-grow: 2;
}
.box:nth-child(2) {}
flex-grow는 Flex Item들이 일정 비율의 크기를 갖게 하고 싶을 때 많이 사용한다.
box1, box2, box3, box4, box5, box6이 2:1:1:1:1:1의 크기 비율을 갖는다
3. flex-shrink
flex-grow와 반대로, Flex Container에 공간이 부족해질 때 Flex Item의 axis 방향 크기가 얼마나 줄어들 수 있는지 지정하는 값이다.
초기값(default value)은 1이고, 음수로의 설정은 불가능하다.
4. flex
flex-basis, flex-grow, flex-shrink 속성은 flex 속성 단 하나만 이용해서 한줄로 지정할 수 있다.
flex로 한줄로 나타낼 때는 다음과 같은 규칙이 있다.
/* 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%;(1) 값이 한 개일 때,
-
단위가 없으면 flex-grow 값이 된다.
-
단위가 있으면 flex-basis 값이 된다.
(2) 값이 두 개일 때,
-
첫번째 값은 단위가 없는 숫자여야 한다. 또한 첫번째 값은 flex-grow가 된다.
-
두번째 값은 단위가 없으면 flex-shrink, 단위가 있거나 auto면 flex-basis가 된다.
(3) 값이 세 개일 때,
-
첫번째 값은 flex-grow, (단위 없어야 함)
-
두번째 값은 flex-shrink, (단위 없어야 함)
-
세번째 값은 flex-basis 값이 된다. (단위 있거나 auto여야 함)
