[Css] css 남는 공간 채우기: flex

사진과 같이 부모 div(container) 안에 자식 div(Left_div, Right_div) 를 빈 공간 없이 꽉 채워서 그리고 싶을 때가 있다.

이때 css 속성의 flex를 사용하면 된다.
코드로 한 번 살펴보자.

 

html code

<div class="container">
    <div class="Left_div"></div>
    <div class="Right_div"></div>
</div>

 

 

css code

.container {
   display: flex;
}

.Left_div {
   width: 300px;
}

.Right_div {
   flex: 1 0 auto;
}

부모 요소인 container에는 flex 속성을 부여하였고,
빈 공간을 채울 Right_div에는 flex: 1 0 auto; 속성을 부여하였다.

 

이 예시는 가로로 꽉 채우고 싶을 때 사용가능하며 세로로 꽉 채우고 싶을 때는 다른 방법으로 해야하는 것 같다...