我想實作類似的東西
此處左側 div 應采用剩余寬度，右側 div（可能是浮動的）div 應采用內容寬度。
是否可以在不使用的情況下實作這一目標flex？
uj5u.com熱心網友回復：
您可以在此處使用 CSS 網格，它提供了一種新型單位fr（這是剩余寬度的一小部分）。
article {
border: 2px solid green;
display: grid;
column-gap: 5px;
grid-template-columns: 1fr auto;
padding: 2px;
}
aside {
border: 2px solid blue;
}
main {
border: 2px solid red;
}<article>
<aside>Takes remaining width.</aside>
<main>Takes content width.</main>
</article>
<article>
<aside>Takes remaining width.</aside>
<main>Takes content width. If this gets wider, aside gets narrower.</main>
</article>uj5u.com熱心網友回復：
是的，使用 flex-box 非常簡單。您可以將flex-growCSS 屬性用于要占用剩余空間的子項。
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
font-size: 18px;
}
.div-1 {
flex-grow: 1;
}
.div-2 {
padding: 0 5px;
}<div class="flex-container">
<div class='div-1'>A large div</div>
<div class="div-2">A div with fixed width</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/379892.html
上一篇：嘗試將輸入框居中放置在div中