子元素自动填充父容器， 并且会自动折行- dispaly: grid
生活随笔
收集整理的這篇文章主要介紹了
子元素自动填充父容器， 并且会自动折行- dispaly: grid
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很多時候，我們都需要這樣的布局
如圖：
如果實現以上的1-4的需求，我們完全可以用dispaly:flex;來實現，如：
<style>.parent {width: 40%;border: 3px solid #567856;display: flex;flex-wrap: wrap;}.parent>div {flex: 1;border: 2px solid #567fff;min-width: 140px;height: 200px;margin: 10px;} </style><body><div class="parent"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> </body>效果圖如下：
我們發現這確實滿足了我們需求的1，2，3，4 但是，你會發現第一行與第二行元素不是對齊的，這樣就不滿足我們的需求5了，所以我們換一種布局方式，就是dispaly: grid
效果圖：
這樣就實現了。
下面我們來區分一下auto-fit 與auto-fill 實現效果的區別吧。
在上面的例子中auto-fit 與auto-fill 效果是一樣的，讓我們刪掉一些div，只留3個子元素試試吧。
其中grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 效果如圖
而grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 效果如圖
這下我們明顯看到區別了吧。
注：auto-fit和auto-fill只有在容器寬度大于子元素的最小寬度總和時才有顯示區別。
auto-fill 最后一步是會保留空軌道留白，不會折疊空軌道，而auto-fit則把空白軌道的空間全部平均分配給了有元素的軌道， 所以auto-fit的最后一步是，折疊空軌道，將空軌道的空間全部平均分配給已有元素的軌道，不留空白。
總結
以上是生活随笔為你收集整理的子元素自动填充父容器， 并且会自动折行- dispaly: grid的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【011】17GRE-自动根据艾宾浩斯曲
- 下一篇： 以太坊2.0区块链代码将于下个月最终确定