标签: react-flexbox-grid

当我想在react-native中添加testID和nativeID时，我在react-native文档中观察到警告。

我无法理解“仅布局视图删除”的含义。它是什么？对性能有影响吗？

通常在excel表中..我们有如下行

Row1
Row2
Row3

和列像

column1  | column2 | column3

但是为什么在使用flexDirection: 'column'框/文本时反应原生被定义为

flexcolumn1
flexcolumn2
flexcolumn3

当使用flexDirection: 'row'框的/文本被定义为

flexrow1  | flexrow2 | flexrow3

我觉得这很奇怪而且很困惑......这只是反应原生的标准差异还是背后有不同的概念？

我正在开发一个使用React并想要设计组件的应用程序,我找到了https://roylee0704.github.io/react-flexbox-grid/,它讨论了流体网格系统.该示例如下所示:

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

我不知道是什么xs,sm以及lg是什么？有人可以解释一下吗？

我想创建一个材质 ui 轮播，在同一行中有 3 个可见项目。当缩小浏览器的宽度时，我希望这些项目仍位于一行中，并隐藏那些不适合的项目。

这是全屏时：

这就是我想要的：

但这就是我得到的：

你对我做错了什么有什么想法吗？这是我的代码：

  <Paper variant="outlined" className={classes.paper}>
    <Grid
      container
      spacing={2}
      className={classes.grid}
      alignItems="center"
      justify="center"
    >
      ...
      <Box display="flex" alignItems="center" className={classes.box}>
        <Grid item xs="auto" className={classes.arrow}>
          ...Left Arrow...
        </Grid>
        <Grid item>
          <Grid
            container
            spacing={2}
            className={classes.grid}
            alignItems="center"
            justify="center"
          >
            <Grid item xs="auto">
              <UserCard content={users[index]} />
            </Grid>
            <Hidden xsDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 1]} />
              </Grid>
            </Hidden>
            <Hidden smDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 2]} />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
        <Grid item xs="auto" className={classes.arrow}>
          ...Right Arrow...
        </Grid> …

我在ReactJS中开发一个应用程序，我在使用以下应用程序：MaterialUI（用于react）和React Flexbox。

我遇到的问题是尝试将卡按钮定位在底部（该问题似乎在不同的框架中散布了互联网）。我正在从这里使用卡-> https://material-ui.com/demos/cards/

从align-items到align-self和不同的显示类型，我已经尝试了几乎所有我能想到的东西。由于我通常与Bootstrap合作，因此我可能会在这里遗漏某些东西，因此希望CSS Master可以为我提供帮助。我将在下面附上图片供参考。

另外作为参考，这是我的代码在react中的外观（ApiPosts是我的卡片组件）->

                    <Grid container>
                        <Grid item xs={12}>
                            <Paper className={classes.paper}>
                                <Row className="rowSpacer">
                                    <Col xs>
                                        <Typography variant="title" align="center" color="textPrimary" gutterBottom>
                                            Posts are below
                            </Typography>
                                    </Col>
                                </Row>
                                <Divider />
                                <ApiPosts />
                            </Paper>


                        </Grid>
                    </Grid>

最后，我的卡片被包裹起来<Row around="xs">（连续4个帖子），每个卡片都放在一个格子中<Col xs >

提前致谢！

编辑：感谢Ivan的回答，解决了这里的代码，以防万一需要它（在Material-UI卡上工作）。

.portCardCl {
    display: flex;
    flex-direction: column;
    height:100%;
}

.portBodyCl {
    display: flex;
    flex: 1 0 auto;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
}

.portButCl{
    display: flex;
    justify-content: flex-start;
}

portCardCl首先<Card>，portBodyCl继续 …