echarts 中 flex 布局可能會(huì)導(dǎo)致高度不能適應(yīng)的問題

作者：MongoGoing

來源：SegmentFault 思否社區(qū)

---

前言

在項(xiàng)目中使用echarts開發(fā)圖表，經(jīng)常會(huì)有幾個(gè)圖表并排展示的需求，而圖表又是需要平均分配空間的時(shí)候，我會(huì)首先想到flex布局，flex布局也是開發(fā)自適應(yīng)網(wǎng)站時(shí)的首選布局方式，目前最推薦的頁(yè)面布局技巧

---

遇到的問題

在flex布局中，外層父div包裹了三個(gè)子div，三個(gè)子div高度需要平均，設(shè)置了子div的flex均為1使其高度平均自動(dòng)分配，注意如果是在垂直方向上，父元素需要設(shè)置flex-direction: column;，在頁(yè)面全屏和縮小的時(shí)候，echarts的resize可能會(huì)使某一個(gè)圖表高度自適應(yīng)失敗

---

預(yù)期的效果

---

分析原因

我猜測(cè)：echarts在調(diào)用resize時(shí)會(huì)重繪，如果你的子div沒有設(shè)置高度，只是設(shè)置了flex：1；那么會(huì)有如下場(chǎng)景發(fā)生：觸發(fā)三個(gè)圖表resize后，子元素高度全為0，父元素高度也為0，會(huì)導(dǎo)致第一個(gè)重繪完成的圖表所在的子div高度不明確，可能會(huì)使得第一個(gè)繪制完成的圖表高度在resize后還是默認(rèn)的高度

---

解決辦法

給每個(gè)子div設(shè)置一個(gè)默認(rèn)最小高度，這個(gè)高度不能與你預(yù)期的高度差太多，可以使用百分比，如下：

父div：

.box { // 父div    height: 100%;    display: flex;    flex-direction: column;}

子div：

.item { // 子div    flex: 1;    min-height: calc(100%/3.33);}

---

點(diǎn)擊左下角閱讀原文，到?SegmentFault 思否社區(qū)?和文章作者展開更多互動(dòng)和交流。

-?END -