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

问题描述

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

请参考以下代码片段。代码沙箱的链接也在代码段下方。

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 导致了一些问题，但本质上您需要查看父子选择是如何工作的。您需要在顶层进行重置，以允许其下方的子元素 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;
}

flexbox flexbox grommet

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

问题描述

解决方法

相关问答