CSS, flex 레이아웃에서 요소 비율을 유지하기

0verfl0w767·2024년 12월 13일

CSS Flex

flex 레이아웃에서 요소 비율을 유지하기: 뭉개짐 현상 해결하기

flex 레이아웃은 동적인 화면 크기 변화에 유연하게 대응할 수 있기 때문에 많은 웹 페이지에서 널리 사용된다.
하지만 때로는 화면 크기가 변경될 때, 예상치 못한 요소의 뭉개짐 현상이 발생하는 경우가 있다.
이는 flexbox 의 특성상 각 요소들이 부모 요소의 공간을 나누어 차지하면서 발생하는 현상으로, 특히 비율을 유지해야 하는 요소에서 문제가 발생한다.
웹 페이지에서 여러 요소를 flexbox 를 사용해 배치할 때, 화면 크기가 변경되면 일부 요소가 뭉개지는 문제가 발생할 수 있다.

이러한 문제를 해결하기 위해, flex-shrink 속성을 활용하여 요소가 축소되는 것을 방지할 수 있다.

flex-shrink 적용 전

예를 들어, 아래와 같은 레이아웃을 사용한다고 가정해 보자.

css

<style>
  .first-line {
  	display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

html

<div class="first-line">
  <span class="course-name" style="color: rgb(121, 29, 176);">
    <span style="font-size: 0.7rem">TOP.17</span> 다문화와 사회통합(구, 다문화의 이해)
  </span>
  <span class="competition-rate">2.68 : 1</span>
</div>

결과

기분 나쁘게도 competition-rate 의 비율을 유지하지 않고 뭉개지는 현상이 발생한다.

flex-shrink 적용 후

우리는 똑똑하다. flex-shrink: 0 를 사용하여 비율이 곱창나는 것을 방지해보자.

css

<style>
  .first-line {
  	display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .competition-rate {
  	flex-shrink: 0;
  }
</style>

html

<div class="first-line">
  <span class="course-name" style="color: rgb(121, 29, 176);">
    <span style="font-size: 0.7rem">TOP.17</span> 다문화와 사회통합(구, 다문화의 이해)
  </span>
  <span class="competition-rate">2.68 : 1</span>
</div>