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

Question

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

Kur*_*eek 10 css flexbox reactjs material-ui

我试图理解这个代码示例，https://codesandbox.io/s/9rvlm，从（在物料UI文档的例子https://material-ui.com/components/grid/）：

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);

Run Code Online (Sandbox Code Playgroud)

我的问题是：分配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弹性容器项目的属性。但是在这个例子中，我没有看到包含这个组件的 flex 容器元素；将CenteredGrid被显示（如<Demo/>直接在根DIV）。

是否styles.root应用于父 div“以防万一”组件在 flex 容器中呈现？我希望得到一些澄清。

Answer 1

vik*_*ben 4

上面提到的安东尼的评论对我来说似乎是正确的答案。如果父组件设置为 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，6 月前
查看次数：	8644 次
最近记录：	5 年前