Material UI 网格的父 div 中 flexGrow 的用途？答案

【问题标题】：Purpose of flexGrow in the parent div of a Material UI grid?Material UI 网格的父 div 中 flexGrow 的用途？
【发布时间】：2019-10-16 13:55:09
【问题描述】：

我试图从 Material UI 文档 (https://material-ui.com/components/grid/) 中的示例中理解此代码示例 https://codesandbox.io/s/9rvlm：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);

我的问题是：将flexGrow: 1 分配给父div 元素的目的是什么？

据我了解https://material-ui.com/system/flexbox/#flex-grow 和https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow，flex-grow 是弹性容器项目的 CSS 属性。但是在这个例子中，我没有看到包含这个组件的弹性容器元素； CenteredGrid 直接显示在根 div 中（如 <Demo/>）。

styles.root 是否应用于父 div 以防万一组件在 flex 容器中呈现？非常感谢您的澄清。

【问题讨论】：

如果我错了，请纠正我，但我认为它的存在没有意义。唯一会产生影响的情况是当有一个 flex 父级时。

标签： css reactjs flexbox material-ui

【解决方案1】：

上面提到的安东尼的评论对我来说似乎是正确的答案。如果父组件设置为 display:flex 并且正在加载的子组件没有 flex:1 或 flex-grow:1 则它不会占用父组件的 100% 宽度。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div style="border:1px solid black; padding:2px; ">
    <div style="border:1px solid red; ">parent is not flex container - child div takes 100% width</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; ">
    <div style="border:1px solid red; flex-grow:1; ">parent is not flex container - child div takes 100% width</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; display:flex; ">
    <div style="border:1px solid red; ">parent is flex container - sorry</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; display:flex; ">
    <div style="border:1px solid red; display:flex; flex-grow:1;">parent is flex container - child div takes 100%</div>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

AnthonyZ的评论说：

唯一会产生影响的时候是有弹性时父母。

但在 React 应用程序中，Body 中的外部 Div 不是最外部的父级。在 HTML/CSS 中就是 HTML 和 BODY。在 create-react-app 中，它们在 index.css 或基本样式表（浏览器）中获得默认的“display:block”。

我通过以下方式解决了这个问题：

将 index.css 移至公开

说真的，为什么 index.css 在 /src 而 index.html 在 /public ？？

修改 index.css

在 index.css 中为 HTML 和 BODY 指定“display:flex”

html {
  display: flex;
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display:flex;
  flex-grow: 1;
}

修改 App.js

在 App.js 中创建一个外部 div

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
}));

// ....

function App() {

    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Provider store={store}>
                <BrowserRouter>
                    <TopMenu/>
                    <AllRoutes/>
                </BrowserRouter>
            </Provider>
        </div>
    );
}

TopMenu.js


const useStyles = makeStyles((theme) => ({
    offset: theme.mixins.toolbar,
    
    title: {
        flexGrow: 1,
    },
}));


export default function TopMenu() {
    
    const classes = useStyles();
    
    return (
        <React.Fragment>
            <AppBar position="fixed">
                <Toolbar variant='dense'>
                    <Typography variant="h6" className={classes.title}>
                        Application Title
                    </Typography>
                    <MainMenu/>
                </Toolbar>
            </AppBar>
            <div className={classes.offset}/>
        </React.Fragment>

    );
}

如果您检查元素，您会发现整个高度都是从 HTML 标记开始的。

这个解决方案的问题：那个烦人的滚动条让你滚动 AppBar 的高度。如果有人对此有解决方案，我将编辑我的答案（或在有更好的解决方案时删除答案:-)）

【讨论】：