CSS flexbox 样式填充元素的宽度和高度答案

【问题标题】：CSS flexbox styles to fill width and height of elementsCSS flexbox 样式填充元素的宽度和高度
【发布时间】：2021-04-05 09:01:35
【问题描述】：

我正在为我的 react-native 应用程序创建一个 Web 应用程序。我对 react-native 的样式感到很自在，并尝试在 web 上使用 flexbox 也希望它能让我使用我的 react-native 知识。但是这些风格在网络上的表现略有不同，我很难找到一个很好的资源来解释基础知识。我正确理解了每个 flexbox 的含义，但我的理解存在差距，因此我无法实现所需的布局。

请参考以下代码sn-p。在 sn-p 下方也链接到代码沙箱。

import React, { useState } from "react";
import ReactDOM from 'react-dom';
import { Box, Header, Text, Avatar, Menu, List } from "grommet";
import { MoreVertical } from "grommet-icons";

const AlarmDetailsHeader = () => {
  return (
    <Header className="alarmDetailsHeader" background="brand" pad="small">
      <Text>"alarm1"</Text>
      <Menu icon={<MoreVertical />} items={[{ label: "logout" }]} />
    </Header>
  );
};

const AlarmDetails = (props) => {
  return (
    <Box className="alarmDetails" flex={true}>
      <AlarmDetailsHeader />
      <Box flex={true} />
    </Box>
  );
};

const AlarmSummary = (item, index, state) => {
  return (
    <Box margin="medium">
      <Text>{item.name}</Text>
    </Box>
  );
};

const AlarmListHeader = (props) => (
  <Header className="alarmListHeader" background="brand" pad="small" border="right">
    <Avatar src="//s.gravatar.com/avatar/b7fb138d53ba0f573212ccce38a7c43b?s=80" />
    <Text level={5}>"Alarms</Text>
    <Menu
      icon={<MoreVertical />}
      items={[
        { label: "First Action", onClick: () => {} },
        { label: "Second Action", onClick: () => {} }
      ]}
    />
  </Header>
);

const AlarmList = () => {
  const [alarms, setAlarms] = useState([
    {
      name: "alarm1"
    },
    {
      name: "alarm2"
    }
  ]);
  return (
    <Box className="alarmList" fill="vertical">
      <AlarmListHeader />
      {/* <List data={alarms} children={AlarmSummary} /> */}
    </Box>
  );
};

const App = () => {
  return (
    <Box className="alarmListWithDetails" direction="row" flex={true}>
      <AlarmList />
      <AlarmDetails />
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

.App {
  font-family: sans-serif;
  text-align: center;
}

.routerContainer {
  display: flex;
  height: "100vh";
  width: "100vw";
  justify-content: center;
}

.alarmListWithDetails {
  max-width: "1080px";
}

.alarmList {
  background-color: ivory;
  width: "320px";
}

.alarmDetails {
  background-color: antiquewhite;
}

.alarmListHeader {
  height: '80px'
}

.alarmDetailsHeader {
  height: '80px'
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/grommet/2.16.2/grommet.min.js"></script>
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  <style type="text/css">
      body {
        margin: 0;
      }
      #root {
        height: 100vh;
        width: 100vw;
        background-color: lightblue;
      }
    </style>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

https://codesandbox.io/s/alarm-web1-yztws?file=/src/styles.css

我正在尝试实现以下类似于 Whatsapp Web 布局的布局。

这是我目前得到的：

我想为主窗口分配一个最大宽度，但这似乎没有生效。我希望左侧的侧边栏覆盖我尝试使用不同 CSS 属性（例如 height: '100%' 或 fill: vertical 或 flex: 1 ）的窗口的整个高度，但这也没有任何效果。

同样，我希望细节面板占据整个高度。我希望两个标题的高度与我指定的 height: 80px 相同，但这似乎也没有任何效果。这些东西在移动设备上运行起来很容易，但由于某种原因，网络上的运行方式就不一样了。

我找到了 flexboxfroggy.com 并完成了所有关卡，但正如我所提到的，我了解 flexbox 属性，但网络需要更多的东西，而不仅仅是 flexbox 属性才能获得正确的布局。

【问题讨论】：

请将您的 CSS 添加到问题本身（不仅仅是指向它的链接）； Stack Overflow 需要这个，它在帖子编辑器中确实有一个沙箱选项，您可以将代码添加到其中，以便它可以运行。
你可以看到这个例子（使用引导）startbootstrap.com/previews/simple-sidebar，
为什么不用 CSS Grid？
我对 flexbox 很熟悉，因为我已经在 react-native 应用程序中使用它，我希望在将移动应用程序移植到 Web 时，我什至可以重用其中的一些样式。跨度>
我明白了。无论如何，如果你决定接近 CSS Grid，这是一个很好的起点（在那里你会找到你想要的东西）：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/…

标签： css flexbox grommet

【解决方案1】：

您的 CSS 导致了一些问题，但本质上您需要查看父子选择的工作原理。您需要在顶层进行重置以允许 100% 用于其下方的子元素。 100% 应该可以工作，但它是set at the HTML/BODY level first。与 Flex 类似，它需要在父级设置，然后子级才能以您设置的方式显示。然后你可以使用像flex-direction: column; 这样的东西，然后它会创建一个完整的列，然后是你设置为flex: 1 的任何div，你会得到一个完整的高度。你可以阅读更多here。

我不建议使用 VH 或 VW，因为它们只会在当前状态下填充窗口。如果该窗口发生更改，则选择将仅保留以前的维度。

下面是您上面的 CSS 示例，我删除了不起作用的代码并添加了一些代码。

html, body {
  height: 100%;
}

body {
  display: flex;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.routerContainer {
  justify-content: center;
}

.alarmListWithDetails {
  max-width: 1080px;
}

.alarmList {
  background-color: ivory;
  width: 320px;
}

.alarmDetails {
  background-color: antiquewhite;
}

.alarmListHeader {
  height: 80px;
}

.alarmDetailsHeader {
  height: 80px;
}

【讨论】：

stackoverflow.com/questions/90178/…