Flexbox 无法与 Aurelia（Webpack 初学者工具包）一起正常工作

Question

给定一些非常基本的 html 使用 flexbox，我可以实现一个带有页眉、页脚和内容区域的屏幕，内容区域填充其间的所有 space：

<html>
   <body style="display:flex;flex-direction:column;flex-grow:1">
      <div style="display:flex;flex-direction:row">Header</div>
      <div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
      <div style="display:flex;flex-direction:row">Footer</div>
   </body>
 </html>

页眉显示在顶部，页脚显示在最底部。

+++++++++++++++++++++
+ Header
+ Content Area
+
+
+
+
+ Footer
+++++++++++++++++++++++++

但是，如果我尝试在 Aurelia 中实现同样的事情（使用 webpack 初学者工具包），则 body 和 content 元素的增长似乎都被忽略了。

index.ejs -- 附带入门工具包 我在原始文件中添加了样式

<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">

app.html -- 对原始入门工具包文件的更改

<template>
   <div style="display:flex;flex-direction:row;">Header</div>
   <div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
   <div style="display:flex;flex-direction:row;">Footer</div>
</template>

我也试过给 <template style="display:flex;flex-direction:column;flex-grow:1">

添加 flex

当您检查页面时，一切看起来都很好——事实上，看起来几乎与基本的 html 示例完全一样。但是，包含内容区的 body 和 div 不会增长以填满页面的高度。

我试图在 Plnkr 中找到一个示例，但它实际上与 Aurelia 存在相同的问题。我注意到它像 Aurelia 一样使用 shadow 元素——我猜这可能与它有关？

Answer 1

要使其与 Aurelia 一起使用（或单独使用），您应该像这样布置标记

<body aurelia-app="main" style="height:100vh;margin:0;display:flex;flex-direction:column;">
  <my-template style="display:flex;flex-direction:column;flex-grow:1">
    <div style="display:flex;">Header</div>
    <div style="display:flex;flex-grow:1">Content Area</div>
    <div style="display:flex;">Footer</div>
  </my-template>
</body>

如果 <template> 被渲染，则需要 <my-template> 才能正常工作，因为 <template> 标签具有特殊含义，不会在视觉上渲染，参见 MDN； https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.

然后body（或任何主要元素）需要一个高度，这里我使用height:100vh。

另请注意，如果不是其父级，则您在 <body> 上的 flex-grow 将不适用，<html> 也有 display: flex

Flexbox 无法与 Aurelia（Webpack 初学者工具包）一起正常工作

Flexbox not working correctly with Aurelia (Webpack starter kit)

css

flexbox

aurelia