flex 사용 시 자식요소 동일한 크기로 만들기 (균등 분할)

개요

보통 요소를 나열하려고 flex 를 사용하다 보면 자식 요소의 개수가 가변적으로 늘거나 줄어들 때를 고려해서

자식 요소의 크기를 결정하지 않고 나열해야 할 때가 있다

이 때 가변적인 수의 자식 요소의 크기를 동일(균등)하게 설정하고 싶다면 flex-basis 의 값을 0으로 설정하여

자식요소의 기본 넓이를 없애면 된다.

 

예제

보통은 자식요소에 아래와 같이 설정해서 많이 사용하게 된다

.element {
	flex: 1 1 auto;
    /*
    위는 아래의 축약형
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    */
}

한데 이럴 경우 자식요소 내부 요소의 길이에 따라 자동으로 크기가 결정되기 때문에

자식요소들이 동일한 크기로 설정되지 않는 경우가 많다.

 

자식요소의 내부요소 길이가 동일 할 경우에는 아래와 같이 flex: 1 1 auto; 로 부여하면 동일한 크기를 가진다

See the Pen flex flex-basis: auto by woox (@woox-styler) on CodePen.

 

자식요소의 내부요소 길이가 다를 경우 flex: 1 1 auto; 로 부여하면 내부요소의 길이가 긴 자식요소가 다른 요소들 보다 큰 크기를 차지한다

See the Pen flex flex-basis: auto : 내부 길이가 다를 경우 by woox (@woox-styler) on CodePen.

 

해결

이럴 경우 flex-basis 값을 0 으로 설정하여 기본 넓이를 없게하면 동일한 크기를 자식요소를 만들 수 있다.

.element {
	flex: 1 1 0;
    /*
    위는 아래의 축약형
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    */
}

 

아래와 같이 자식요소의 내부 길이가 다르더라도 동일한 크기로 설정된다.

See the Pen flex flex-basis: 0 by woox (@woox-styler) on CodePen.