【问题标题】：Leaflet map in a flexbox layout弹性盒布局中的传单地图
【发布时间】：2018-01-19 20:50:27
【问题描述】：

我似乎无法让（非常简单的）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%;
}

【问题讨论】：

标签： html css leaflet flexbox

【解决方案1】：

Flex 的强大功能现在拥有你

地图窗格没有高度可继承，因为父级 #content 正在从其 Flex 属性获取高度（告诉它增长）。 #mapPane 因此具有正确的高度 - 0 的 100% 是 0。

将地图窗格带入 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>

【讨论】：

这太棒了。我正在尝试将这种方法与 Django + Foundation 6 + leaflet.js 一起使用，并且得到了一些时髦的结果。在地图页面上，我想要页眉、内容（围绕 django 块内容调用的 div，调用带有传单地图 div 的模板）和页脚......传单地图和页脚不正常。使用地图 div 上的内容类（并且基本模板中没有内容包装器 div），地图填充了页面的其余部分并且页脚消失了......有什么想法吗？
“Flex 的力量现在拥有你”这句话再真实不过了。即使在使用 flex 几个月后，与过去 15 年的浮动行为相比，我仍然对它感到敬畏。
问题又出现了。证明是，提供的示例不起作用（或不再起作用）。
@MedMatrix - 地图未填充，但使用 flex 的实际修复仍然可以正常工作。你可以看出来，因为空白地图占据了整个屏幕:)