css - 使用 flex 在 React 中的全高

Question

flex即使有很多主题问题，我也找不到答案。

我创建了一个简单的 React 应用程序 ( npx create-react-app)。

然后我删除App.css并将内容设置index.css为：

html, body, #root {
    height: 100%;
    margin: 0;
}

接下来，在App.js我尝试使用 flex 制作全屏元素：

import React from 'react';


function App() {
  return (
    <div style={{ backgroundColor: 'blue', display: "flex", flex: 1 }}>
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }} />
    </div>
  );
}

但它只是行不通。为什么 flex 元素没有拉伸？

Answer 1

当 flex 中有其他元素时，flex-grow 起作用。与其他元素相比，它使元素增长 x 倍。

wrt您已实施的解决方案：内部div也不需要display: flex和方向。它将从父级继承div。

使 div 占据全高。添加height: 100vh到父 div。

让我知道这是否能解决问题。

谢谢你。

Answer 2

要实现窗口的高度，您需要提及 height: 100vh 用于父标签，例如

班级-.parent{height: 100vh}

对象样式 -style={{height: '100vh'}}

import React from 'react'
 function App() {
  return (
    <div style={{ backgroundColor: 'blue', display: "flex", height:'100vh' }}>
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }} >Hello world</div>
    </div>
  );
}