FlexBox 布局结构答案

【问题标题】：FlexBox Layout structureFlexBox 布局结构
【发布时间】：2020-01-23 06:44:10
【问题描述】：

您好，我正在尝试使用以下 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>
  );
}

示例：

https://codesandbox.io/s/throbbing-feather-cmxiq

基本上我的 div 因某种原因没有出现在我的身体中

【问题讨论】：

页眉或页脚中没有定义内容或高度，因此它们正在折叠到 0 高度。
另外，使用height: 100vh，而不是height: 100%。 stackoverflow.com/a/31728799/3597276
@Michael_B 我在我的 css 主体上使用 100% vh > #emasanext > div { height: 100vh; }

标签： css flexbox

【解决方案1】：

内部divs 都是空的。从本质上讲，除非给出明确的高度，否则空的 div 会崩溃。

在您的情况下，顶部和底部 divs 最终将达到 0px 高度，因为它是空的并且设置为不弯曲，并且根本不会显示。中间的有flex-basis 和500px，因此显示为唯一可见的元素。请参阅下面的屏幕截图。在页眉/页脚上添加内容或设置显式高度（或 flex-basis）都是一个好的开始。

【讨论】：