flexbox의 부모 요소를 변수 요소와 일치하는 CSS
하위 요소를 inline으로 표시하고 상위 요소의 폭을 하위 요소와 일치시키려는 CSS 설정을 기록합니다.
프레젠테이션을 확인하십시오.
프레젠테이션
하위 요소에 따라 상위 요소의 너비 조정
See the Pen 부모 요소 너비 100% by harumi-sato ( @harumi-sato )
on CodePen .
하위 요소와 관계없이 상위 요소를 100% 너비로 고정
See the Pen 부모 요소의 너비를 하위 요소의 크기로 조정할 수 있습니다. by harumi-sato ( @harumi-sato )
on CodePen .
コード
Flexbox 주위의 block이 inline-block을 지정하면
하위 요소는 inline-block의 행위입니다
HTML
<div class="parent">
<ul class="item_parent">
<li class="item_child _child1">category1</li>
<li class="item_child _child2">category2</li>
</ul>
</div>
CSS
.parent{
display:inline-block;
}
.item_parent{
display:flex;
background:lightpink;
}
.item_child{
background:#fff;
}
まとめ
암컷 요소가 변할 수 있는 경우 1 레벨에서 폭 지정용 블록 만들기p>
Reference
이 문제에 관하여(flexbox의 부모 요소를 변수 요소와 일치하는 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/flatsato/items/9027d82189b49d985441텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
