Flexbox를 사용하여 콘텐츠 너비에 따라 범위를 만드는 방법
P粉726234648
2023-08-15 12:26:13
<p>고정 너비 플렉스 행 상위 요소에 범위와 div를 사용했습니다</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.parent {
디스플레이: 플렉스;
플렉스 방향: 행;
너비: 230px;
배경색: 파란색;
}
.child1 {
배경색: 빨간색;
}
.child2 {
최소 너비: 40px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<span class="child1">span의 일부 텍스트입니다</span>
<div class="child2"/>
<p><br /></p>
<p>범위는 항상 텍스트와 동일한 너비이고 div는 상위 요소의 나머지 너비 전체를 차지하기를 원합니다. 이제(코드 조각에서 볼 수 있듯이) 텍스트가 새 줄로 이동하면 빨간색 배경 영역이 텍스트보다 넓어집니다. 이 코드를 수정하는 방법은 무엇입니까? 텍스트 가장자리에서 정확히 끝나려면 빨간색 배경이 필요합니다</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
아마도
으아악parent를 그리드로 설정하고 측정에 fr 단위를 사용할 수 있을까요?이렇게 하면 텍스트 컨테이너가 텍스트와 동일한 너비로 만들어지고 나머지 컨테이너가 남은 공간의 1몫을 차지하게 됩니다(다른 컨테이너는 공간의 100%를 차지하지 않습니다).
행 표시의 경우 열을 행으로 변경하면 됩니다.