使用 flex 在 React 中的全高答案

【问题标题】：Full height in React using flex使用 flex 在 React 中的全高
【发布时间】：2019-11-13 11:46:23
【问题描述】：

尽管有很多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 元素没有拉伸？

【问题讨论】：

标签： css reactjs flexbox css-in-js

【解决方案1】：

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

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

让 div 占据整个高度。将height: 100vh 添加到父div。

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

谢谢。

【讨论】：

你确定没有办法做到这一点不提到height吗？我想使用flex box 来实现这一点。
我不认为没有身高我们可以做到这一点。

【解决方案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>
  );
}

【讨论】：