Css FlexBox布局结构

您好，我正在尝试使用以下css和结构制作flexbox布局：

页眉/主/页脚 我对flex:1做了一些研究，但最终不了解如何应用它，我的页脚需要粘贴：

export default function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <div style={{ flex: "none", background: "blue" }} />
      <div style={{ flex: "1 500px", background: "red" }} />
      <div style={{ flex: "none", background: "yellow" }} />
    </div>
  );
}

导出默认函数App（）{
返回(
);
}

例如：

---

基本上是我的，我的div有个问题，因为某种原因没有出现在我的身体里

内部的

div

s都是空的。从本质上讲，除非给出明确的高度，否则空的

div

将崩溃

在您的情况下，顶部和底部的

div

s将以

0px

height结尾，因为它是空的，并且设置为not flex，并且根本不会显示。中间的一个具有

flex-basis

的

500px

，因此显示为唯一可见的元素。请参见下面的屏幕截图。添加内容或在页眉/页脚上设置显式高度（或弹性基准）都将是一个良好的开端

---

页眉或页脚中没有定义内容或高度，因此它们将折叠为0高度。此外，请使用

高度：100vh

，而不是

高度：100%

@Michael#B我在css主体上使用100%vh>#emasanext>div{height:100vh；}