Flex #2

Flex #2

flex-grow

default: 0;

.box {
   flex-grow: 1;
}

width를 정의하지 않음에도 자동으로 가로 길이를 균등하게 나누어 width가 설정되는 것을 확인할 수 있다.

.box1 {
   flex-grow: 2;
}

box1 클래스에 flex-grow: 2; 를 정의하면 Box1만 아래 사진과 같이 다른 box에 비해 두 배 증가한 것을 확인할 수 있다.

.box1 {
   flex-grow: 3;
}

box1 클래스에 flex-grow: 3; 를 정의하면 Box1만 아래 사진과 같이 다른 box에 비해 세 배 증가한 것을 확인할 수 있다.

만약 어떠한 flex-grow 값도 주지 않은 상태인 아래에서

한 width 값을 기본값으로 가지게 만들고 싶을때는 어떻게 해야 할까? 이때 flex-basis을 사용할 수 있다.

flex-basis

.box {
   flex-basis: 10rem;
}

위와 같이 flex-basis를 설정해주면 기본 flex 성질을 가진 기본 box 들의 width 길이가 10rem (= 100px)으로 설정된 것을 확인할 수 있다.

.container {
   flex-wrap: wrap;
}

.box {
   flex-grow: 1;
}

위와 같이 container 클래스에 flex-wrap: wrap; 을 정의하고 box에 flex-grow: 1; 을 정의하면 flex-wrap: wrap;이 동작하지 않는 것을 확인할 수 있다.

그 이유는 flex-basis 혹은 width 값이 없다. 즉 기준이 없으므로 flex-flow: wrap;이 동작하지 않는다. 하지만 flex-basis를 이용해 기준을 정해주면 flex-flow: wrap;이 정상적으로 동작하는 것을 확인할 수 있다.

.container {
   flex-wrap: wrap;
}
.box {
   flex-basis: 10rem;
   flex-grow: 1;
}

Responsive Web Design에 엄청 유용하게 사용할 수 있다.

flex-shrink

default: 1;

flex-grow는 특정 비율에 맞게 flex 내부의 items를

.box2 {
   flex-shrink: 0;
}

box2 클래스를 가진 박스는 줄어들지 않고 계속 자신의 크기를 유지하고 있는 것을 확인할 수 있다.

일반적으로 flex-shrink는 flex-basis + flex-shrink + flex-grow를 종합적으로 사용한다. 아래와 같이 다시 처음으로 돌려서 어떻게 위 세 프로퍼티를 종합적으로 사용하는지 알아보자.

flex: flex-grow flex-shrink flex-basis

위 순서로 flex 프로퍼티로 정의했을 때 아래 사진과 같이 종합적으로 동작하는 것을 확인할 수 있다.

.container {
   flex-wrap: wrap;
}
.box {
   flex: 1 1 20rem;
}