问题标签 [react-flexbox-grid]

首先，我会说我对 React 和前端开发完全陌生。我正在尝试使用 React 组合一个简单的 Web UI，并尝试在进行过程中解决问题。我有一个问题，我的内容（在屏幕截图中显示为“Lorem”）离左侧的抽屉太远了。通过开发工具检查时，它显示存在某种“不可见”块。我的猜测是我在使用 flexbox 布局网格的方式上做错了。我很感激能帮助我理解我哪里出错了，以及我是如何滥用 flexbox 的。

UI 问题预览 http://prntscr.com/nb74pc

我尝试通过更改 flexGrow、flexShrink 参数来玩弄 flexbox 网格，但是没有运气。

我的代码如下

我遇到的问题应该很简单，可以解决，但我对 flexbox 的了解不够了解正在发生的事情。

我试图让两个 div 并排放置，它们之间有一些空间，但我根本无法调整它们的宽度。

html(jsx) 代码如下所示：

和CSS：

我可以调整边距，但它会将另一个 div 移到第一个 div 之下。我可以调整所有其他属性，除了宽度。我希望 div 在它们之间有空间，但我没有尝试过任何工作。

我不知道这个属性是从哪里来的，甚至把 !important 放在 css 中也没有用。

编辑：通过在 DivA 中更改 lg={2.5} 并在 DivB 中添加 margin-left 找到了一种解决方法，但我仍然想知道是否有更好的方法..

我有一个名为 main-filter 的 div，在 div 中，我有两个 div。现在，我想创建一个带有按钮、标签和输入的表单，我想在表单中放置两个 div，它应该看起来像下面的屏幕截图。我有 HTML 和 CSS 代码，但它不工作，无法弄清楚如何使用 CSS 网格来做到这一点。我也需要让它响应！我是 CSS 网格的新手，任何帮助都将不胜感激。谢谢你。

css网格表格图片截图，

基本上由两部分构成：grid（flex view）和listview。

使用的元素来自原生基础。

我也用过<View>，但问题还是一样。

代码片段是：

附上重叠问题：

我有：

这最终看起来像：

但是我希望每个红色框都缩小（垂直）以适应内容并具有相等的间距？

我错过了什么？

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

这是全屏时：

这就是我想要的：

但这是我得到的：

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

风格

我正在使用 flexbox 创建一个表格，该表格将在 3 种屏幕尺寸上以不同的方式显示。

我正在努力研究如何实现中型视图，方法是将第 1 列下的第 2 列和第 3 列下的第 4 列折叠，以实现如下所示的布局。

我认为 flex-flow: column wrap 应该可以工作，但我无法让它工作。有没有人有任何提示？

（也意识到在将数组拉入弹性盒之前使用 JS 手动将数组分成两半有点麻烦。我从两个数组 2021 和 2022 开始并将它们分成两半，但可能有更好的方法）

大宽度桌面（4列）

中型（折叠成 2 列）

小号（手机用 1 列）

当前的 html

任何人都知道如何解决这个问题：在 iOS 中，一个按钮在具有固定高度的 Flex 中被“压扁”，但在 Android 或 Web 上却没有。

演示链接