TAG
CSS
Result
Run
License
<div class="wrap"> <article> <h2>display 속성의 contents 활용</h2> <div> <p> <article> 요소의 하위 <h2>와 <div> 요소를 <div class="wrap"> 요소의 플렉스 항목으로 처리하려고 한다. 하지만 <article> 요소가 있어 방해를 받는다. 그렇지만 <article> 요소는 시맨틱 역할을 위해서 꼭 필요하다. </p> <p> 이 때 <article> 요소에게 display 속성을 contents로 지정하면 컨테이너의 역할이 아닌 콘텐츠로 처리된다. 플렉스 레이아웃이 계획대로 만들어 졌다. </p> </div> </article> </div>
.wrap { display: flex; gap: 0 20px; } .wrap > article { display: contents; } .wrap > article > h2 { flex-shrink: 0; flex-basis: 300px; } .wrap > article > div { flex-grow: 1; }
Console
expand_less
License
License
by DevDic
Close