问题标签 [flexboxgrid]

https://codepen.io/leon-yum/pen/XYpgzj?editors=1100

我试图确保在移动设备（400px 及以下）上，我的 flexbox 网格坚持 2 cols / box。但是无论我做什么，它要么捕捉到 1 列，要么每行分别保持在 3 列或 4 列。

预计宽度为 400 像素：

结果：

HTML

CSS

好的，问题是，我将宽度和高度设置为视口大小，但是如果我在里面写任何文本<h1></h1>，就会出现滚动条。我不知道为什么它会这样，我想我在做一些不合时宜的事情。我只使用 HTML 和 CSS 进行了一些设计，但从未遇到过这样的事情，这次我尝试使用 FlexBoxGrid 进行一些响应式设计测试并遇到了这个问题。正如我所说，只要我删除<h1></h1>滚动条内的文本就会消失。那些被评论的人也会发生同样的事情<h3></h3>。也发生<p></p>...：/

工作太久了。为什么 COLUMN02 超出了浏览器的右侧边缘？

任何帮助，将不胜感激。非常感谢！

圣杯演示

细节：

• 目标是在不编写脚本的情况下尽可能多地利用 FLEX BOX。因此 flex-basis 用于列宽和左/右边距以在屏幕上/离屏移动列。
• 单击标题中的切换 COLUMN01 以切换 COLUMN01。
• 单击 COLUMN02 表的第一行以切换 COLUMN03。
• 单击 COLUMN03 中的链接以切换 COLUMN04。
• COLUMN02 和 COLUMN03 的宽度可以通过它们之间的调整器来调整大小。

我错过了什么导致 COLUMN02 超出右侧的浏览器边缘？

有没有更好的方法通过 FLEX BOX 移动这些列？

非常感谢任何输入！

再次感谢！

我正在使用并引用flexboxgrid css。我怎样才能有等高的列？我的侧栏id=dtside有背景颜色，我希望它的高度与id=dtmain. 在使用 flexboxgrid 之前，我正在使用display:table并且display: table-cell效果很好，但我们切换到了 flexbox。我试图将两者结合起来，结果不是我想要的。我还找到了一些在线解决方案，表明我只需要添加display:flex到父级div并尝试将其添加到两者中class=box，class=row但效果不佳。

我尝试添加哪些作品，但如果display: flex内容没有使用全宽，则侧栏会向左移动。#dtmaincontentsdtmain

我想知道是否有人可以在这里帮助我..

我要做的是创建一个包含 3 列的网格。

我面临的问题是在我设置之后。

.container => display: grid and grid-template-columns: repeat(3, 1fr) 我得到 3 列，但行总是最高行的高度。

因此，假设我有 6 个 div 正在加载它们的内容。

2 div 的高度为 50px，第一行的另外两个为 30px；4 div 将显示在 50px 之后的第 2 行。

现在，有没有办法让单元格的高度独立？也许不是网格？也许与 Flexbox？

唯一的事情是..我不想为任何东西设置一个固定的高度，他们会根据他们的内容自动获得。

谢谢！

我已经尝试了所有我知道的解决方案，让这两个页脚元素在移动设备上并排显示。我在 wordpress 网站 (www.med-tac.com) 上有三个页脚小部件，我正在尝试使用 @media 方法在移动设备上重新排序和重新对齐它们以适应我的屏幕尺寸。

我正在尝试将 1 和 3 放在同一行，并尝试调整其他属性以使其正常工作，但现在我正在使用 flexbox 尝试完成此操作，但很乐意恢复到任何有效的解决方案。

我试过网格布局、左右浮动的方式、flexbox方式和显示内联块的方式，都不会在同一行显示元素，即使手动将宽度减小到远小于移动页脚宽度。

我试图让侧边栏 1 和 3 并排显示在同一行上，但它们彼此重叠。

我有一个带有 6 个按钮切换的垫子按钮切换组。在桌面上，所有按钮都应该在一行中。在较小的屏幕上，该组应该打破并显示 2 行按钮，如下所示：

到目前为止，这是我的代码（我正在使用 flexbox-grid）：

如果在桌面上工作正常，但在移动屏幕尺寸上，只有 3 个按钮可见（应该在第二行的三个不可见）：

如何让我的 mat-button-toggle-group 分成两行？

我正在使用材质 ui Grid 组件来创建响应式网格布局。我想根据屏幕大小对齐网格内的内容 - 左对齐 xs 右对齐 md。我怎么做？

我使用 xs 和 md 断点根据屏幕大小划分网格。使用的材料-ui-grid文档。该文档还提到了一个名为 align-items-xs-flex-start 的属性。所以我给了 align-items-xs-flex-start 和 align-items-md-flex-end 作为 Grid 组件的道具，以查看内容是否在 xs 中与 md 中的左对齐和右对齐。但它没有用。

一些示例代码。

在中等大小的屏幕上，我希望 John Doe 正确对齐。在一个小屏幕上，我希望 John Doe 来到下一行并左对齐。当我尝试使用 align-items-xs-flex-start 和 align-items-md-flex-end 时，在这两种情况下它仍然左对齐。

我创建了一个包含 12 列的非常基本的 flexbox 布局。我面临的问题是我的列仅在我使用带有类行的 div 容器时才起作用。我无法找出它为什么以这种方式工作。有人可以帮助我或提供有关如何进行的见解。

我的代码。

_variables.scss

_helpers.scss

网格.scss

对于即将到期的我的学校项目，我正在创建一个网站，其部分类似于此网站上的“我们的工作”和“跟随”部分：https ://bellafare.com/

我在 flexbox 的帮助下重新创建了它们，它们在 15 英寸笔记本电脑屏幕和 iphone 6/7/8 上看起来就像我想要的那样。然而！在宽度 646 到 978 之间，布局看起来很糟糕，因为其中一个或多个图像最终位于该行的下方。有没有办法通过媒体查询来解决这个问题，让它像在 bellafare 网站上一样，随着屏幕变小，div 的大小会变小，直到它在 iphone 6/7/8 平台上然后变成列？我尝试了几种选择，但我遇到了死胡同。另外，如何使文本最终出现在图像上？

html:

和

CSS：

我将非常感谢我能得到的任何帮助。很抱歉，如果这是一个完整的菜鸟问题，我的焦虑正在加剧，所以我想我会试一试。