问题标签 [flexboxgrid]

我正在使用 Flexbox Grid ( http://flexboxgrid.com/ )，并且我试图使我的列的高度相等，而不是具有单独的高度。有谁知道如何做到这一点，因为我似乎在文档中找不到任何内容。

目前我的img标签列大于我的内容列。知道如何将它们设置为相等吗？

谢谢，尼克

在这种情况下

• 需要为所有三列保持相同的高度（这已经根据当前代码工作，“.col”使用 flex 获得相同的高度）
• 需要为所有黄色 div 设置黄色 div 的最大高度（动态内容）
• 只需要使用 CSS（不是 JavaScript）来实现
• 使用弹性（不是表格）

这是测试代码jsfiddle

当前设计 需要设计

我在“底部内容”区域内有动态内容。我需要做的是，将所有“底部内容”区域设置为相同的高度（为 3 个黄色区域设置最大高度），并且所有“col”也应该是相同的高度。

HTML 代码

CSS 代码

我在下面有一个线框，想看看用flexbox.

我编写了一个简单的 flexbox 网格系统，但我的线框需要比我的网格系统更多的自定义。

我有父 div 有display: flex并且有 2 个子 div 有flex:1和flex: 0 0 40%. 添加内容 div（蓝色和红色内部的灰色框）将与主包装器的其余部分保持一致（整个灰色框设置为max-width: 1400px）的最佳方法是什么？

谢谢你。

所以我正在使用flexbox 网格并且有一个基本的东西是这样的：

通常看起来像这样：

现在我需要顶部的绿色条在滚动时向下跟随，底部的绿色条要粘在可见页面的底部。说嘿的中心位置可能会或可能不会有内容。

我已经尝试了很多东西，大部分来自关于 flex 的 css-tricks 网站和其他各种博客文章，但似乎没有一个能满足我的需要。如果我在 sidebar-top/space/bottom 周围添加一个包装器并将其设置为列而不是行，则它不再获得 .sidebar 和 .content 具有的相同高度。似乎没有任何效果。

这甚至可以用纯css吗？

编辑：相关的css类容器行和col-xs-X都来自链接在问题顶部的flexbox网格

我想知道我在下图中绘制的布局是否可以使用 flexbox 和这个 HTML 结构：

如果这可以用 flexbox 完成，并且不需要在里面添加更多的盒子，那就太好了。

I'm using the http://flexboxgrid.com framework.

I want the columns to be horizontal on desktop but stack on mobile and responsively.

Example (Desktop):

Example (Mobile):

Here's a JSFiddle that demonstrates what I am saying.

https://jsfiddle.net/RohitTigga/mfv622rt/

How exactly does one stack divs for each column inside the row on a smaller screen or mobile?

Is that not possible with the framework?

我的项目几乎完成了，只有一件事无法正常工作。我使用 Isotope 删除项目，这非常有效。该项目被删除，下一个项目滑入它的位置。现在我想将项目添加到网格中。如果我删除 Isotope 功能，一切正常，但我希望它与 Isotope 一起工作（因为很好的过渡等）。如果我使用我当前的代码，除了最后一项（它被克隆但没有添加到网格中）之外，什么都不会发生。

重现问题：
- 单击添加用户
- 没有任何反应

工作：
- 从标题中删除同位素 js 文件，从 JS 文件中删除同位素 js（第 7 到 16 行）
- 单击添加用户
- 用户很好地添加到网格中

这是我的 JS 的一个片段：

看我的小提琴：

https://jsfiddle.net/r3c05odv/3/

谁能帮帮我吗？

我是 flexbox 的新手，我尝试将 align-center 应用于行类，但是 h1 不会居中。有人可以帮我解决这个问题，并向我解释为什么对齐中心不起作用？这是一个代码笔Codepen

我有一个问题，使用下面webpack的下面package.json会导致flexboxgrid类被破坏，如下所示。

以下是查看 html 时生成某些类的方式：

有谁知道这可能是什么原因造成的？

package.json

webpack.config.js

WebpackHelper.js

webpackDevHelper.js