如何使容器內的每個項目都縮小尺寸CSS

Question

所以我想知道這種方法是否可行以及如何實現。

我有一個看起來像這樣的容器。

當我使用

#wrapperGrid { 
    display: inline-block; 
    resize: both; 
    overflow: auto; 
    z-index: 10000; 
    padding: 2px; 
} 

我想在wrapperGrid每個元素相對於大小wrapperGrid的高度縮小了下來。

現在EQCSS看起來是最好的選擇，並使用它們的元素查詢來檢測wrapperGrid中的更改並分別更改高度和寬度。

@element #wrapperGrid { 
    .box { 
     width: 100%; 
     height: 100%; 
    } 
} 

是使用EQCSS正確的方式來處理這個問題，我怎麼那麼能得到在寬度和高度的變化提示？

Answer 1

您可以使用flexbox做類似的事情。通過使用align-items:stretch;，您可以獲取子元素垂直和水平調整大小。

我添加的div的另一層作爲行，否則，你將戰鬥的滾動條的寬度創建溢出問題：

.container { 
 
    border: 1px solid #007; 
 
    resize: both; 
 
    overflow:scroll; 
 
    height:200px; 
 
    width:200px; 
 
    padding: 15px; 
 
    
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: stretch; 
 
} 
 

 
.row { 
 
    flex: 1 0 100%; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    align-items: stretch; 
 
} 
 

 
.row > * { 
 
    border: 1px solid red; 
 
    flex: 1 1 auto; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
</div>