问题标签 [flexbox]

flexbox可以嵌套吗？我在水平弹性盒中嵌套了一个水平弹性盒，在垂直弹性盒中嵌套了一个垂直弹性盒。只有水平中的水平在 chrome 中起作用，而在 Firefox 中则不起作用！

我在这里创建了一个 jsfiddle：http: //jsfiddle.net/NpkTL/1/

但这里是html：

和CSS：

#A在左边，#B在右边。#A 和#A2-container 是垂直弹性盒，#B 和#B2-container 是水平弹性盒。我为不同的 div 设置颜色并在每个级别（垂直宽度和垂直高度）缩小它们，以便更容易看到发生了什么。左边看起来不错（在 chrome 中！），但在右边，#B2a 应该垂直填充 #B2（橙色）。

我意识到在这个例子中，使用中间行/列为 3 的 flex 的 flexbox 会更容易，但我将内容动态加载到 #A2 的等效项中，它恰好也是一个 flexbox。

我正在使用Flexbox在 WebKit 浏览器中实现等高列。

我正在使用这个 CSS ......

...和这个 HTML ...

...产生...

js小提琴。

如您所见，这三个元素是它们最高兄弟（第一个li）的高度。

如果我删除了最高元素，我希望会有一个回流，其中其他元素成为下一个最高元素的高度。

我所期待的...

究竟发生了什么...

有趣的是，当您开始在 Web Inspector 中检查元素时，问题会自行纠正。也许我可以通过显式触发浏览器重绘来重现这种自我纠正，但我宁愿不必为应该在 CSS 中 100% 处理的内容引入 JavaScript。

当兄弟元素被移除时，有没有办法告诉 Flexbox 收缩/重新计算？

我知道灵活框布局模块规范已经改变，一些浏览器现在实现了不止一个版本（使用不同的语法）。我一直在搜索信息，但我只能找到带有警告说它们现在已经过时的教程。

我知道规范可能会再次更改，但我有一个不寻常的用例（Chrome 扩展），我想以当前形式使用它。我只想知道如何使用 Chrome 中实现的最新版本。

有人知道最新的教程吗？

我想在我们动态创建盒子的布局中使用弹性盒子属性。

所以我想根据计数调整自己（框）。就像只有 1 个盒子一样，它应该占用 100% 的空间，最多 3 个盒子会排成一排。如果屏幕中出现第 4 个框，则自动转到下一行。

我搜索了很多关于 flex-flow 的内容，但没有找到正确的解决方案。

请帮忙。

问候

当我从 flexbox 中删除一个项目时，剩余的项目会立即“捕捉”到它们的新位置，而不是动画。

从概念上讲，由于项目正在改变它们的位置，我希望过渡适用。

我已经在所有涉及的元素（弹性框和子元素）上设置了过渡属性

有什么方法可以对弹性框的编辑（添加和删除）进行动画处理？这对我来说实际上是一件大事，也是 flexbox 缺少的一块。

我正在尝试使用 HTML/CSS 实现一个 Windows 8 应用程序，该应用程序具有两个文章的 flexbox 布局（一个在 y 轴上的另一个之上），设置为overflow-x: scroll. z-index但是，我希望通过使用文章的属性，将文章的扩展视图包含在整个屏幕上，覆盖另一个 flexbox 容器。但是，它不起作用。我不认为这是 IE10/Win 8 独有的，我认为这是我的 CSS 某处的问题，因为它在带有 webkit flexbox 属性的 jsFiddle 中不起作用。

有关示例，请参见此 jsFiddle。如您所见，expanded文章仍然位于另一个 flexbox 容器下。

请问有什么帮助吗？我已经找了一段时间了，找不到问题的根源。

好的，所以我试图在 jquery 中重新创建“slideUp”和“slideDown”功能，但是当使用 flexbox 进行显示时！

这就是我已经走了多远（目前上面的代码可以工作，但是当我们用它从“none”切换到“-webkit-flex”时不会滑动，我尝试了以下）

这根本无法工作，没有动画，没有错误或任何东西......

奇怪的是我这样做是因为如果我用我的所有对象（类“设置”的元素）开始页面，我想加载为显示 flex，然后隐藏它们

当我单击以向下滑动“设置”部分时，这似乎没有应用弹性框，但是我已经转到另一个页面并在行为正确时返回它......非常奇怪！

奇怪的是，我无法在提琴手中重新创建它...... http://jsfiddle.net/FzqA7/ ..

假设我有以下布局（见下图）......我有一个顶部的标题（A），底部的页脚（C）和中间的容器（B）应该填充页眉和页脚之间留有 100% 的空间。

想不出任何方法如何使用纯 css 来实现这一点。任何想法，将不胜感激！

我让 flexbox 在 Firefox 中工作，但在 webkit 浏览器中 display:box div 失去了背景。
这是在线测试：
http ://www.angeloalpaca.railsperu.com/html/

这是一个简单的例子，看到背景在浮动的 flexbox div(webkit) 中消失了：
http ://www.angeloalpaca.railsperu.com/html/simple.html

的HTML：

款式

款式 960 格

可能重复：
display:box 和 display:flexbox 有什么区别

我在这里阅读了一个 css3flex-box 演示，父元素的样式是：

一旦我将 更改display: -webkit-flexbox;为display: -webkit-box;，页面布局就发生了变化。

购买 我阅读了一些关于-webkit-flexboxand -webkit-boxjust is the syntax.的教程。是这样吗？它们之间有什么区别吗？