问题标签 [flexbox]

我正在尝试创建一个 4x4 flexbox 网格。四个盒子中的每一个都应具有相同的垂直高度，但从左到右每行堆叠两个。这可能吗？

（在 960 和 640 之间调整浏览器的大小以查看我的尝试：http ://www.joshuasortino.com/index-new或查看我希望它如何工作：http ://www.joshuasortino.com/index ）

编辑：通过创建两个容器（每行一个）可以实现这种效果，但我宁愿只使用一个包装器/容器。

我希望你能帮忙！以下是参数：

• 一个具有动态宽度和高度的父容器
• 可变数量的孩子
• Parent的高度是用JS设置的，取决于窗口大小
• 随着父母的高度崩溃，它的宽度必须根据孩子扩大
• 儿童必须先垂直填充容器，然后水平填充容器
• 子代必须是父代的直接后代——行和列不能有嵌套框或附加结构
• 孩子们有统一的尺寸
• 孩子必须是相对定位的，在JS中无法计算他们的位置
• JS 只允许设置父级的高度/宽度

HTML

盒子模型

高度缩小后的盒子模型

这对 CSS/CSS3 盒子模型可行吗？

谢谢！！

在 Chrome 的检查器中，div“navbox”的 flexbox 属性被划掉，旁边有黄色警告图标。不幸的是，谷歌对其黄色图标没有任何类型的工具提示或解释，所以我只能猜测它为什么拒绝我的 display: box 属性。这里有什么问题？

在 Safari 或 Chrome 中查看这个 jsFiddle，然后在 Firefox 中查看：http: //jsfiddle.net/brandondurham/LRJhm/

它在 Webkit 中的样子：http: //cloud.smallparade.com/B4TE

它在 Firefox 中的样子：http: //cloud.smallparade.com/B53R

您会看到 Firefox 中的灵活框已损坏。两个盒子中较长的一个 ( .left) 将 css 属性white-space设置为，nowrap因为我不希望它换行。这个单一的属性使灵活的盒子打破并扩展以适应.leftdiv 的全部内容。

其他人看到这种行为吗？有修复吗？

我是一个应用程序开发人员，可以说是没有前端的离线应用程序或服务，而且我已经很久没有看到任何 HTML 或类似的东西了。

但是 HTML5 的新特性其实让我很感兴趣，现在我知道了，Flex-box 目前还没有统一支持，需要用到 webkit-box 和 moz-box 等。

但我认为对于博客，我可能会开始考虑改变设计。

但我不太清楚我们将如何进行 2 x 2 布局，有点像：

• 左上：固定高度，动态宽度
• 右上角：固定高度，固定宽度
• 左按钮：动态高度，动态宽度。
• 右按钮：动态高度、固定宽度
• 徽标从左上角重叠到按钮右侧。
• 盒子之间的小边框。

框下方的动态高度不是必须的，只要它们对齐，内容很可能会填充它们。

但是，您将如何最好地使用新设施进行这种布局？

编辑：我最终放弃了这个。

我怎么能用 jQuery 做到这一点：http: //jsfiddle.net/tdskate/C4nAG/

我需要一个 div 自动将高度调整为剩余多少可用垂直空间。

我试图用它来计算它，$('body > *').height()然后从中减去元素的高度......但是当某些元素具有顶部或底部边距时，它不能正确计算。

此外，当浏览器窗口调整大小时，它需要调整大小......

我的 flexbox 的 2 个孩子都被赋予了box-flex: 1. 我的理解是，它们的宽度应该彼此相等（两者都占其父 flexbox 总宽度的50% ）。但是当内容被添加到孩子时，它们的宽度会发生变化（取决于内容是什么和填充）！为什么会这样？

CSS：

HTML：

我面临着让一个相当复杂的网络应用程序在 HTML/CSS 中工作。我发现 flexbox 有很多问题，这似乎可以解决我的问题。我试图了解我做错了什么或 flexbox 限制是什么。我只在 Chrome 中工作，所以这会有所帮助。

我一直看到两个问题： - 盒子不明白如何容纳里面包含的孩子的高度/宽度 - 父母不包含孩子的盒子。本期图片：

而不是在这里发布代码是一个 JSFiddle： http: //jsfiddle.net/dex3703/ryCQq/ 不完全完整，但你明白我希望的想法。CSS 由三个不同的文件组合而成。

谢谢！

在 Firefox（8.0 版）中，如果我将元素指定为display: -moz-boxand margin: auto，则该元素不再放置在其父元素的中心。它适用于 Chrome。这是 Firefox 的问题，还是我遗漏了什么？我怎么解决这个问题？

一种解决方法是添加一个包装div元素并将其设置display为block，但这很难看。

我正在尝试实现一种布局，其中项目会像报纸/杂志文章部分一样浮动。这与jQuery 的 Masonry所做的类似。但我试图仅使用 CSS3 来实现这一目标。我想也许box显示属性可以做到这一点。尽管在尝试了几次之后，我无法使项目在父列宽度满足后向下滑动。

有没有办法只使用 CSS 来实现这种布局？

标记将是这样的：

在这里，一个部分将向左浮动并在更适合的列队列上调整自身（而不是像简单浮动那样低于前一个的基线）。