问题标签 [flexbox]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 嵌套的 CSS3 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。
css - 如何让 flexbox 尊重已删除的元素？
我正在使用Flexbox在 WebKit 浏览器中实现等高列。
我正在使用这个 CSS ......
...和这个 HTML ...
...产生...
如您所见，这三个元素是它们最高兄弟（第一个li）的高度。
如果我删除了最高元素，我希望会有一个回流，其中其他元素成为下一个最高元素的高度。
我所期待的...
究竟发生了什么...
有趣的是，当您开始在 Web Inspector 中检查元素时，问题会自行纠正。也许我可以通过显式触发浏览器重绘来重现这种自我纠正，但我宁愿不必为应该在 CSS 中 100% 处理的内容引入 JavaScript。
当兄弟元素被移除时，有没有办法告诉 Flexbox 收缩/重新计算？
css - 有没有关于 flexbox 模块的最新教程？
我知道灵活框布局模块规范已经改变，一些浏览器现在实现了不止一个版本（使用不同的语法）。我一直在搜索信息，但我只能找到带有警告说它们现在已经过时的教程。
我知道规范可能会再次更改，但我有一个不寻常的用例（Chrome 扩展），我想以当前形式使用它。我只想知道如何使用 Chrome 中实现的最新版本。
有人知道最新的教程吗？
css - CSS3 弹性盒属性
我想在我们动态创建盒子的布局中使用弹性盒子属性。
所以我想根据计数调整自己（框）。就像只有 1 个盒子一样，它应该占用 100% 的空间，最多 3 个盒子会排成一排。如果屏幕中出现第 4 个框，则自动转到下一行。
我搜索了很多关于 flex-flow 的内容，但没有找到正确的解决方案。
请帮忙。
问候
css - 是否可以为 Flexbox 插入和移除设置动画？
当我从 flexbox 中删除一个项目时，剩余的项目会立即“捕捉”到它们的新位置，而不是动画。
从概念上讲，由于项目正在改变它们的位置，我希望过渡适用。
我已经在所有涉及的元素（弹性框和子元素）上设置了过渡属性
有什么方法可以对弹性框的编辑（添加和删除）进行动画处理？这对我来说实际上是一件大事，也是 flexbox 缺少的一块。
html - CSS flexbox、溢出：滚动和 z-index 的问题
我正在尝试使用 HTML/CSS 实现一个 Windows 8 应用程序，该应用程序具有两个文章的 flexbox 布局（一个在 y 轴上的另一个之上），设置为overflow-x: scroll. z-index但是，我希望通过使用文章的属性，将文章的扩展视图包含在整个屏幕上，覆盖另一个 flexbox 容器。但是，它不起作用。我不认为这是 IE10/Win 8 独有的，我认为这是我的 CSS 某处的问题，因为它在带有 webkit flexbox 属性的 jsFiddle 中不起作用。
有关示例，请参见此 jsFiddle。如您所见，expanded文章仍然位于另一个 flexbox 容器下。
请问有什么帮助吗？我已经找了一段时间了，找不到问题的根源。
jquery - flexbox 的 slideDown 动画
好的，所以我试图在 jquery 中重新创建“slideUp”和“slideDown”功能，但是当使用 flexbox 进行显示时！
这就是我已经走了多远（目前上面的代码可以工作，但是当我们用它从“none”切换到“-webkit-flex”时不会滑动，我尝试了以下）
这根本无法工作，没有动画，没有错误或任何东西......
奇怪的是我这样做是因为如果我用我的所有对象（类“设置”的元素）开始页面，我想加载为显示 flex，然后隐藏它们
当我单击以向下滑动“设置”部分时，这似乎没有应用弹性框，但是我已经转到另一个页面并在行为正确时返回它......非常奇怪！
奇怪的是，我无法在提琴手中重新创建它...... http://jsfiddle.net/FzqA7/ ..
html - 页眉和页脚之间 100% 的内容
假设我有以下布局（见下图）......我有一个顶部的标题（A），底部的页脚（C）和中间的容器（B）应该填充页眉和页脚之间留有 100% 的空间。
想不出任何方法如何使用纯 css 来实现这一点。任何想法，将不胜感激！
css - CSS3 Flexbox - 在 960grid 的 Safari 中失败
我让 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 格
css - css3 中 display:box 和 display:flexbox 有什么区别
我在这里阅读了一个 css3flex-box 演示，父元素的样式是：
一旦我将 更改display: -webkit-flexbox;为display: -webkit-box;，页面布局就发生了变化。
购买 我阅读了一些关于-webkit-flexboxand -webkit-boxjust is the syntax.的教程。是这样吗？它们之间有什么区别吗？