我似乎无法(非常简单)Leaflet.map 在 flexbox 中呈现。我认为这可能是 invalidateSize
简单(损坏)示例: jsbin
如果您删除 flexbox CSS，它将起作用: jsbin
HTML
<body>
<div id="content">
<div id="mapPane"></div>
</div>
</body>
CSS
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
}
#mapPane {
height: 100%;
}
最佳答案
Flex 的力量现在拥有您
map Pane 没有继承的高度，因为父 #content 从其 Flex 属性获取高度(告诉它增长)。 #mapPane 因此具有正确的高度 — 0 的 100% 是 0。
将 map Pane 带入 Flex 世界
将
display: flex添加到#content。它仍然会随着现有的flex: 1属性增长:#content { display: flex; }将
flex: 1添加到#mapPane:#mapPane { flex: 1; }
完整示例
$(function() {
L.map("mapPane");
});html,
body {
margin: 0px;
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
display: flex;
}
#mapPane {
flex: 1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" type="text/css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script><script>L_PREFER_CANVAS = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet-src.js"></script>
<div id="content">
<div id="mapPane"></div>
</div>关于html - Flexbox 布局中的传单 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27240894/