问题标签 [flexboxgrid]

当我在浏览器（例如 Firefox：iphone X）的响应视图中开发时，一切都非常合适，但是当我更改为 iphone X 浏览器（Safari 或 Chrome）时，内容位于浏览器底部菜单后面，我需要滚动查看内容。

Grid 是否没有考虑视口大小减去浏览器底部菜单的大小？

有什么提示可以克服这个问题吗？

提前致谢。

我正在开发一个使用mdbootstrap的 react js 项目，我正在尝试构建一个类似于此的组件

第一张图片是桌面的，另一张是移动用户的

所以，我试图实现类似的东西，我开始使用引导类，但在我的反应项目中无法实现。但令我惊讶的是，这些列并没有占据全宽。为什么会这样，我该怎么办？

这是它在普通 HTML 中工作正常：

在JsFiddle上检查此代码。

这是我的 react js 项目的链接，组件是profile.js您可以通过导航栏检查它：https ://codesandbox.io/s/dawn-flower-iqcuz

这就是我得到的

这就是我要的

我正在尝试将我的 flexbox 设计为在大屏幕上有 3 列，在移动屏幕上有 2 列（参见下图 1 和 2）。这是我的 JS Fiddle 和我的代码：

https://jsfiddle.net/kwxj83v6/6/

它在大屏幕上工作正常，但无法让它在小屏幕上正确呈现。

谢谢

我觉得这可能以前已经回答过，但是我已经搜索过，找不到任何接近的问题。

我正在使用一个非常标准的引导行和列设置来设置菜单栏（flexbox）的样式。这个菜单是由 php 中的 wordpress 生成的，而不是用 html 硬编码的。由于它是网站的一部分，因此菜单可能会随着时间而改变：一次可能有 4 个项目，或者另一个可能有 7 个项目。因为这些是可以改变的项目，我不知道每个项目会有多宽。

我正在尝试为每个项目制作一列，因此它们彼此相邻并填充行的整个宽度。我可以通过简单地使用来在引导程序中执行此操作col，因此它设置为使每一列的宽度相等。

在示例中，我们有 5 个项目，每列的宽度为 20%。但是，这对于我的菜单并不理想，因为菜单文本会有所不同：我希望较长的项目填充更多空间，较短的项目填充更少，因此您将获得 30% 和 10% 而不是 20% - 20% .

有谁知道是否有办法在 flexbox 中做到这一点？我对替代方案持开放态度，例如使用简单的 divfloat: left应用宽度或类似方法，到目前为止，我使用这些的主要问题是它们不会在没有应用宽度的情况下自然地填充行的全部空间。

注意：我知道这几乎就是表格的作用。我不愿意为此使用表格，因为它是响应式编码，我需要菜单项在设备上以不同的方式设置样式，例如为移动设备上的每个菜单项提供 100% 的宽度。使用表格来实现这一点将是一件非常头疼的事情，但使用 flexbox 来实现这一点非常简单。

我正在做关于前端大师的课程。这是入门课程的第一个项目。我根据以下内容制作了网站：https ://btholt.github.io/intro-to-web-dev-v2/news.html

这是我的 HTML 代码：

这是我的 CSS 代码：

但是，您会在放大页面时看到，inner-flex div 不会占据整个长度。任何想法如何解决它？

我正在创建一个带有顺风和弹性框的网格。是否可以创建一个 7 列网格？我知道我可以使用宽度百分比，但这里的最佳做法是什么？

我正在使用max-height我的图像，但它仍然不适合该部分并且超出了范围。

我为顶层div( 90vh) 指定了一个固定大小，在它下面，我使用百分比来表示特定的相对高度。

结构看起来像

nav component html是_

附件是大约。提琴手。我无法上传图片 - https://jsfiddle.net/01fj8hpz/

我的怀疑是问题可能出在flexbox我将图像移出时flexbox，图像似乎缩小了。但后来我无法将flexbox内联与img. 它位于单独的行中。

如果单击列表项，我需要按字母顺序显示名称。为此，我正在使用 Vue.js 和 Flex Grid。

我有一个名为 ListAll 的列表项，

单击 ListAll 时，我必须显示 nameList 数组中按名称分组的所有记录。我在显示分组名称时遇到问题。我正在使用 Flex Grid 来显示名称。显示 A 的记录后，B 的记录应从新行开始，但 B 记录不会换行。如何使用 Vue js 或 ES6 或 CSS 语法在每组名称后添加换行符？

我已经添加了这样的换行符<div class="break"></div>，但它并没有打破记录。

使用这样的 flexbox 网格 CSS 类，记录显示在 4 列中，没有换行符，

预期结果：

AlphabeticalFruitsName.vue

这是我的页面的代码：

弹性容器工作；主要问题是此页面中的第三个标签，其中第三个 div 与其他两个不应该对齐；在上面的例子中，它有点太接近1998 年的福特了。

我试过用 20px、40px 等各种值来做 margin-left 和 margin-right ，但它没有用。

尝试修复此 flex-container 部分的任何帮助都有效；除了这个小部分之外，模板工作得很好。

我只想在新项目中使用 Foundation X/Y 或 Bootsrap 网格，但找不到他们的自定义下载选项，有人知道它是否仍然可用吗？

如此处所见@1.15：https ://webdesign.tutsplus.com/courses/getting-to-know-the-foundation-xy-grid/lessons/downloading-the-xy-grid

如果该选项不再可用，我如何只在新项目中使用网格而不编译整个 Foundation Framework？

编辑：我也愿意使用 Bootstrap 顺便说一句，我基本上只是想在我的项目中使用任意一种 SASS flexbox mixins。

谢谢