CSS Flexbox : 플렉스 항목 3 개, 열 2 개 (콘텐츠와 동일한 너비) 및 너비에 맞게 확장되는 항목 1 개
Albrechtnate
3 개의 플렉스 아이템이 있습니다. 2는 콘텐츠에 맞게 크기를 조정하고 나란히 표시해야합니다. 다른 플렉스 아이템은이 너비에 맞게 커야합니다 (더 이상은 안됨).
내가 원하는 것 :
현재 모습 :
가까이 다가 갈 수 있었지만 여전히 일부 회색 배경이 표시됩니다 (텍스트를 고려하지 않는 것 같습니다). https://codepen.io/albrechtnate/pen/abbYeYL
.container {
display: flex;
width: fit-content;
flex-flow: row wrap;
}
.container div:first-child {
width: 100%;
}
/* Un-related Styles */
.setup {
background-color: #ccc;
}
.setup div {
height: 100px;
background-color: blue;
}
.setup div:first-child {
background-color: red;
}
.setup div:last-child {
background-color: green;
}<div class="container setup">
<div>Item</div>
<div>Item Two</div>
<div>Item Three</div>
</div>CSS Grid ( https://codepen.io/albrechtnate/pen/zYYWgEZ )를 사용하여 작동 했지만 Grid는 이와 같은 과잉처럼 느껴집니다. 네 번째 항목을 추가하면 grid-template-columns를 변경할 필요가 없습니다.
Albrechtnate
결국 첫 번째 항목을 제외한 모든 항목 주위에 컨테이너를 추가하고 필요에 따라 플렉스를 사용하여 성장하게했습니다.
혜택:
- 첫 번째 항목은 원하는만큼 길 수 있고 다른 항목은 너비와 일치하도록 커집니다.
- 무한한 양의 플렉스 항목이있을 수 있으며 첫 번째 항목은 결합 된 너비에 맞게 커집니다.
추가 마크 업을 추가하지 않고 이러한 이점을 유지하는 방법을 찾는 사람이 있으면 알려주십시오!
https://codepen.io/albrechtnate/pen/YzzLzLV
.container {
background-color: #ccc;
width: fit-content;
}
.container > div:first-child {
background-color: blue;
}
.container .group {
background-color: teal;
display: flex;
}
.container .group div {
background-color: red;
flex: 1 0 auto;
}<div class="container">
<div>Item</div>
<div class="group">
<div>Item Two</div>
<div>Item Three</div>
</div>
</div>
<br>
<div class="container">
<div>Item</div>
<div class="group">
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
</div>
</div>
<br>
<div class="container">
<div>Item - This one is super duper extra looper long.</div>
<div class="group">
<div>Item Two</div>
<div>Item Three</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
몇 마디 만하겠습니다