[CSS] flex 속성 (flex-basis, flex-grow, flex-shrink)

1. flex-basis : 아이템의 기본크기

기본값 auto

#container {
    display: flex;
    max-width: 800px;
    margin: auto;
    border: 3px solid #000;
    background-color: #fff;
}
.item {
    font-size: 40px;
    flex-basis: auto;
}

#container { /* 위와 동일 */ }
.item {
    font-size: 40px;
    flex-basis: 120px;
}

2. flex-grow : 아이템의 너비 비율

기본값 0

• flex-grow 값이 1이면 1:1 비율로 맞춰지는게 아니라 여백을 기준으로 비율이 맞춰지는 것이다.

.item {
    flex-grow: 1;
}

너비를 똑같이 나타내고 싶을 때는,

.item {
    flex-grow: 1;
    flx-basis: auto;
}

3. flex-shrink : 아이템의 너비 감소 비율

기본값 1

• 너비값(width, basis)이 있을 때 적용되며 창이 줄어들 때 확인.
• 창이 줄어들 때 컨테이너에 영향을 미치는 순간부터 아이템이 줄어든다.

.item {
    flex-basis: 120px;
    flex-shrink: 1;
}

화면창이 줄어들 때 오른쪽 빨간칸이 컨테이너에 영향을 미치는 시작 부분이다. 빨간칸을 넘으면 item이 일정한 간격대로 줄어든다.

2번 item만 flex-shrink: 2를 적용해보자.

.item {
    flex-basis: 120px;
    flex-shrink: 1;
}
.item:nth-child(2) {
    flex-shrink: 2;
}

flex shrink 계산법
120(item너비) * 1(flex-shrink) = 120
120(item너비) * 2(flex-shrink) = 240
120 : 240 ==> 1 : 2 비율을 가진다.
1,3,4,5 item 박스는 3분의 1만큼 너비가 줄어들고 2번 item박스는 3분의 2만큼 줄어드는 것을 알 수 있다.

04. flex: (flex-grow flex-shrink flex-basis)

.item {
    flex: 1 1 0;
    /* flex-grow를 제외한 나머지 속성 생략 */
    flex: 1;
}

flex: 1은 flex-grow: 1 과 같은 것으로 flex: 1 1 0; 으로 적용된다.

 

 

5. [번외] 텍스트가 넘쳐도 같은 너비 유지하기

.item {
    flex: 1 0 20%;
    /* 말줄임 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

---

Reference

http://www.devdic.com/css/reference/properties/flex-basis

https://chaeyoung2.tistory.com/9