[CSS] div 태그 가로로 등분하기

간단한 소개 페이지를 만들다가 여러 div 태그를 가로로 배치하면서 같은 비율로 등분해야하는 경우가 있었다.

그럴 때 flex속성을 이용해 가로로 배열시킨 후 등분할 수 있다.

 

div 여러개 가로 배치 + 등분

<style>
        .boxgroup {
            display : flex;
        }

        .box {
            flex : 1;
        }
</style>

 

상위 div인 boxgroup에는 display : flex; 를
하위 div인 box에는 flex : 1;을 적어준다.

 

<div class = "boxgroup">
        <div class="box" style="background-color: antiquewhite;">
            1번 박스
        </div>
        <div class="box" style="background-color: brown">
            2번 박스
        </div>
        <div class="box" style="background-color: orange">
            3번 박스
        </div>
        <div class="box" style="background-color: wheat">
            4번 박스
        </div>
</div>

 

결과

 

결과 예시 사진

4개의 div가 가로로 배치 되고, 같은 비율로 등분되어있는 것을 확인 할 수 있다.