css flexbox 컨셉으로 html element 크기 비율로 조정하기

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space

developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90

 

CSS에 있는 flexbox라는 컨셉이 있는데, 비교적 최근에 나온 컨셉이다. 공식문서를 좀 읽어보자.

 

이 Flexbox라는 컨셉은 1차원적인 레이아웃모델에 공간배분, 정렬기능을 제공한다고 한다.

끝 선 맞추기 등 여러가지가 있는데, 일단 제일 평범하면서도 중요한 기능인 크기 조절에 대해 살펴보자.

 

일단 용어를 조금 정리하고 넘어가자면, 항목(item)은 내부에 내용(contents)를 포함한다. 항목이 parents element라면 내용은 child elements라고 볼 수 있겠다.

 

많은 기능들이 있는데, 일단 on-demand로 당장 필요한 기능을 이야기 해보고자 한다.

 

이걸 알게 된 이유는, 화면 레이아웃에서, 이렇게 구성하고 싶은데 크기를 잘 조절못해서 구글링하다가 알게 되었다.

<div class="box">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

내가 원하는 건, one은 고정된 20px크기를 갖고, 아래의 three도 고정된 50px의 크기를 가지며,

중간의 two는 남는 공간을 죄다 차지하도록 하게 하고 싶었다.

이런 경우 이렇게 지정하면 된다고 한다.

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.one {
    flex: 0 1 20px;
}

.two {
    flex: 0 1 auto;
}

.three {
    flex: 0 1 50px;
}

 

이제 방법은 알았으니 원리를 좀 알아보자.

크기 조절(분배)

크기 조절 컨셉은 3개의 css property를 사용하는데, 기본 컨셉 이러하다.

기본 크기를 지정하고, 공간이 남거나 모자라면 weight값에 따라 비례적으로 나눠 가진다.

이때 기본 크기가 flex-basis 값이다.

그리고 공간이 남는 경우 더 커질 수 있는 경우 flex-grow값에서 관장한다.

그리고 공간이 모자라서 더 작아지는 경우 flex-shrink라는 값에서 관장한다.

 

flex-grow가 양수이면, flex 항목의 크기가 커질 수 있다.

flex-shrink가 양수이면, flex 항목의 크기가 작아질 수 있다.

 

양수라면 그 크기의 비율에 따라서 많이 작아지거나 많이 커지거나 하게 된다.

flex-basis

flex-basis property는 남는 공간이 있는 경우 항목의 크기를 결정하는 속성이다.

기본 값은 auto인데, 브라우저가 해당 항목이 크기가 있다고 생각하는 경우, 그 크기를 flex-basis로 갖는다는 뜻이다.

만약 항목이 크기를 갖지 않는다면 그 항목의 컨텐츠 크기가 flex-basis로 사용된다. 따라서 단지 부모 항목에 display: flex; 만 설정해줘도, 내부 항목들이 한 줄로 정렬되면서 자기자신의 내용들을 표현할 크기만큼만 공간을 가져가는 이유이다.

flex-grow

flex-grow가 0이면 동작하지 않고, 양수이면 주축 방향으로 크기가 flex-basis이상 커질 수 있도록 해주는 특성이다.

flex-grow를 1로 하면, 남은 공간들은 각 항목에 동일하게 분배된다. 만약 1이상의 값이면 남은 공간이 분배될 때, 그 값의 비율만큼 분배가 되게 된다.

flex-shrink

flex-grow와 비슷한 방식으로 동작하는데, 이는 남은 공간을 추가적으로 할당해서 커지는 것이 아니라 basis만큼 분배하기에 남은 공간이 부족할 시 각 사이즈를 줄이는 방식을 정의한다. 이 값이 클 수록 더 많이 작아지게 된다.

 

축약형 속성 flex

flex-basis, flex-grow, flex-shrink 항목을 한 줄에 한번에 표현할 때 쓰는 속성 이름이 flex이다.

flex: 1 2 auto; 라고 지정하면 각각 왼쪽부터 순서대로 flex-grow, flex-shrink, flex-basis가 되게 된다.