问题标签 [react-flexbox-grid]

我不知道在使用 material-ui-next ("material-ui": "^1.0.0-beta.22", )

似乎他们iconElementRight=从 api 中删除了。我们必须在应用栏中使用<Grid>now 吗？感觉有点笨拙。在应用栏中浮动按钮（例如登录）的正确方法是什么？

我想知道是否有一个组件可以让我在不编写自定义 CSS 的情况下将任何我想要的垂直/水平居中？

我试过 react-center 和 react-flexbox-grid 但没有任何成功。如果有一些组件允许我设置我想要如何对齐水平和垂直槽属性，那就太好了。

编辑：

这是我的代码：

我知道，无论我在网上找到什么解决方案，它都不起作用。我可以水平对齐中心的所有内容而没有任何问题，但垂直对齐是个问题。

我什至在尝试 react-flexview 组件，但我无法使其以垂直对齐方式居中。

谢谢。

I'm new to React Native, and struggling to get my ScrollView working.

I'm trying to have a vertically scrollable list of TouchableOpacity components that are arranged in pairs across the page, e.g.

This is how the app looks when I wrap the TouchableOpacity components in a View, but (obviously) it is not scrollable. If I change the View to a ScrollView, the components are no longer arranged correctly, they now look like this:

They are still not scrollable, and also the layout is no longer working correctly.

So far (and there may be a better way of achieving this?) I've attempted to create my layout by setting the container to have flexDirection: row, with wrap turned on, and sizing the sub components appropriately to fit two across the screen.

Approximation of the code i'm using is:

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

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

如何在 Reactjs 中使用 flexbox 制作这样的组件？

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

我遇到的问题是试图将卡片按钮放在底部（这个问题似乎在不同的框架中向互联网发送了垃圾邮件）。我正在使用这里的卡-> https://material-ui.com/demos/cards/

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

同样对于参考，这是我的代码在反应中的外观（ApiPosts 是我的卡片组件）->

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

提前致谢！

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

portCardCl首先继续<Card>，portBodyCl继续<CardActionArea>，最后portButCl继续<CardActions>

我即将开始一个 React 项目，它涉及一些复杂的布局，并且需要响应。

我画了一张粗略的图表，说明我需要做什么，并标出了我觉得难以完成的地方。

你能告诉我这种布局是否可以通过 flexbox 或 react-css-grid 或其他东西来完成？如果有链接，您可以将我指向解释此问题的教程或文章，那将非常有帮助。

这是图像

在 Next.js 中配置react-flexbox-grid和 sass 时。面对这个挑战。

使用 latest 创建的项目：create-next-app并且我没有任何自定义更改.babelrc

错误

index.js:2178 警告：道具className不匹配。服务器：“col-xs-12 col-md-4 col-lg-2”客户端：“col-xs-12__flexboxgrid2__AdoKE col-md-4__flexboxgrid2__3pbbS col-lg-2__flexboxgrid2__1x6vt”

Sass 配置如下所示：

多一点：

flexboxgrid尝试在上面的 sass 配置中包含和排除，但仍然没有运气。

经过长时间的研究，我能够通过覆盖来解决问题localIdentName:[local]，以便它匹配客户端和服务器渲染。不幸的是，如果我使用：localIdentName: '[local]__[name]__[hash:base64:5]'，它会失败，因为客户端正在使用：localIdentName:[local]。那么，我们可以如何以及在哪里覆盖 like clientIdentName？我们需要玩什么.babelrc吗？

我正在使用 Semantic UI React，它们的Textarea 有一个 autoHeight 属性，可以在您创建新行时自动扩展文本区域。如果 Textarea 被具有 display: flex 属性的 Grid.Column 包裹，这将停止工作。

基本上我想要一个垂直对齐的文本框，并随着添加更多行而自动扩展，但似乎我可以自动扩展它或让它垂直对齐，但无法同时获得两者。

我一直在尝试将我的 Card 组件放置在页面的垂直和水平中心，但它只垂直对齐而不是水平对齐。我尝试将容器的高度增加到 100 rem，然后在中心对齐项目，但似乎没有任何效果。