[CSS] 부모가 display: flex; 일때 특정 내용물 한줄로 나타내기

제목 : 내용

 

이런 구조가 있는데 제목 부분이 반응형일때 아래처럼 두줄 이상으로 안내려가길 원한다. 

 

입사지원서 첨삭 이란 제목이 두줄 이상이 된 경우

 

이럴땐 flex-shrink 를 사용하면 된다.

flex-shrink 란 해당 요소가 화면 크기 변화로 인해 축소될 경우 비율을 선택하는 것인데 이 상황에선 한줄로 표현되길 원하는 것이므로 축소가 되지 않게 아래와 같이 스타일을 적용해주면 된다.

flex-shrink: 0;

 

 

참고) flex: 1 1 auto 에 대해서 알아보자면, 

위의 언급한 flex-shrink가 여기서 가운데 1 자리에 해당된다.

즉, 첫번째 1은 flex-grow

두번째 1은 flex-shirnk

마지막 auto는 이 요소가 최소한으로 줄어들수 있는 min-width 값을 설정해주는 것이다.

auto로 할 경우에는 자동으로 비율을 조절해준다.