css) div 내 div들을 가로로 동일한 간격으로 배치하는 방법

서비스 UI를 개발하는 도중 화면 하단에 공지사항, 개인정보처리방침과 같은 문구를 추가해달라는 요청사항을 받았습니다.

그래서 저는 초기에 하단에 div 레이어를 만들고 추가해야하는 메뉴만큼 자식 div로 만들고 배치하는 식으로 진행했는데 생각한대로 잘되지 않아서 고민이었습니다.

대부분의 stackoverflow 답변에서는 display를 inline-block으로 설정하고 float: left로 설정하면 원하는대로 될 것이라고 했는데 퍼블리셔분이 전체적인 body display를 block으로 설정하셨기 때문에 하단 div display를 inline-block으로 설정할 경우 깨지는 문제점이 있었습니다.

저는 결국 display flex를 통해 이와 같은 문제점을 해결했는데 css 코드는 대충 아래와 같습니다.
sameRow class가 가로로 배치하는 케이스고 normal class 같은 경우 세로로 배치되는 케이스입니다.

 

.container {
    width: 200px;
}
.flex {
    display: flex;
}
.sameRow {
    border: 2px solid black;
    height: 40px;
    width: 100%;
}
.normal {
    height: 40px;
    border: 2px solid red;
}

<div class="container">
    <div class="flex">
        <div class="sameRow">Content</div>
        <div class="sameRow">Content</div>
    </div>
    <div class="flex">
        <div class="sameRow">Content</div>
        <div class="sameRow">Content</div>
    </div>
    <div>
        <div class="normal">Content</div>
        <div class="normal">Content</div>
    </div>
</div>

 

[출처]

https://stackoverflow.com/questions/32440760/splitting-a-div-into-two-div-horizontally-aligned-while-the-overall-is-vert