利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
生活随笔
收集整理的這篇文章主要介紹了
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如題，本人經常設置寬高都是這種，先通過js獲取父元素的寬高，別的子元素的寬高。再通過js賦值
this.height = this.$refs.xxx.offsetHeight - this.$refs.xxx.offsetHeight <div :style="{'height':height+'px'}"></div>當然以上的辦法看起來就不太好，奈何本人水平有限，有沒得別的方法，只能湊活這樣用了
后來參考大神的項目發現了好的解決方案：父元素設置flex屬性，子元素占位1 從而設置寬度如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}.box{width: 100%;height: 100vh;display: flex;overflow: auto;/* flex-direction: row; 默認就是這個我就不設置了*/}.kk{flex: 1;background: lightblue;}</style></head><body><div class="box"><h1>ve</h1><div class="kk">sfde</div><h1>ddd</h1></div></body> </html>效果圖如下
?下面進階一下 子元素占位1 從而設置高度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}.box{width: 100%;height: 100vh;display: flex;overflow: auto;/* flex-direction: row; 默認就是這個我就不設置了 */ }.kk{flex: 1;background: lightblue;display: flex;/*重要*/flex-direction: column;/*重要*/}.gg{flex: 1;/*重要*/background-color: yellow;}</style></head><body><div class="box"><h1>ve</h1><div class="kk">sfde<div class="gg">fefe</div></div><h1>ddd</h1></div></body> </html>總接一下：父元素一要設置flex,flex-direction 子元素設置占位1（我總覺得這是一種css布局方式，有名字，但是我不曉得，知道的大佬麻煩評論區告知一下謝謝
?
總結
以上是生活随笔為你收集整理的利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【有效】vscode中markdown导
- 下一篇： 用python实现纸牌游戏的随机抽牌洗牌