问题标签 [flexbox]

我在 Chrome 中使用 css3 的 flexbox（无需为此担心跨浏览器）。我很难说服它按照我想要的方式布置我的内容。这是我的目标的草图：

这是我尝试的 jsFiddle：http: //jsfiddle.net/Yht4V/2/这似乎工作得很好，除了每个.group都会扩展其高度而不是创建多个列。

我在这里普遍使用 flexbox。body垂直布局，#contentdiv 占据页面的剩余高度。每个.group都是水平放置的。最后，每个都在一个垂直的包装.item内布置。.group

不幸的是，每个都.group通过扩展高度最终成为一列#content，这会导致垂直滚动条（不需要）。如果我将每个的高度设置为.group固定的像素大小，项目会分成多列，但这会破坏弹性框的流动性。这是固定高度的样子：http: //jsfiddle.net/Yht4V/3/

#content那么，由于所有内容都使用弹性框进行管理而没有设置固定高度，我怎样才能让我的div 不垂直扩展？我期待 flexbox 触发更多列，而不是扩展其父级的高度并导致滚动条。

看看我拥有并运行的网站的这个页面设计：

http://www.jungledragon.com/image/9472/barn_owl_close-up.html

如您所见，这涉及经典的两列布局。事情的顺序很重要。例如，您可以直接在照片旁边看到这所关注的物种。

我现在正在为这个网站编写一个响应式设计，并面临一个挑战。想象一下在狭窄的智能手机视口上的那个页面。经典的策略是简单地将右列“堆叠”在左列下方，让用户垂直滚动。然而，就元素的排序而言，这远非理想。“物种”块将位于照片下方，用户首先必须滚动浏览评论等内容，然后才能看到照片和物种之间的关系。

我正在尝试解决这个问题，这篇解释 CSS 的 flexbox 作为一种可能的解决方案的文章听起来很有希望：

http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography

这里的想法是只使用 CSS，可以改变元素的视觉顺序，这正是我所需要的。不幸的是，从那以后我了解到这篇文章使用了过时的规范，并且几乎没有任何浏览器支持新规范：

http://css-tricks.com/old-flexbox-and-new-flexbox/

这种对我来说是毁灭性的。尽管如此，我仍然想在概念层面提出我的问题：

我见过的所有关于 flexbox 的演示都有这样简单的标记：

接下来，将容器声明为 flexbox，方向垂直。最后，为每个子元素分配一个顺序。例如，这允许使用单个 CSS 语句将 child2 移动到 child1 之上。

现在问题来了。如果实际标记更复杂，因为有额外的层次结构在起作用怎么办？一个例子：

如您所见，此标记具有额外的层次结构，要重新排序的实际内容块不是最高级别容器的直接子元素。他们是孩子，但不是直系孩子。

flexbox 和子元素的重新排序可以在这种情况下工作吗？例如，“content5”可以在“content1”和“content2”之间移动吗？

无论浏览器支持不佳，我都试图从概念上了解是否会支持。我问的原因是因为额外的列层次结构在标记中非常常见，如果 flexbox 重新排序仅适用于直接子级，那将是完全糟糕的。

我正在学习 HTML 5 拖放并遵循本教程：

http://html5doctor.com/native-drag-and-drop/

我已经让它工作了，但考虑到我的最终目的是构建一个小页面，可以将图像从一个 div 拖放到另一个，我正在做的是获取拖动元素的 id，然后做一个该元素的 .appendChild 到可以放置图像的 div 中。

它工作正常，但似乎在 Chrome（在 OSX 上）上存在重绘错误，因为一旦我将三个图像中的一个拖到放置目标，它就会被添加，但它的幽灵仍然在原始 div 上。有时它会通过滚动页面消失，有时它不会。

如果我删除了使原点/目标成为弹性框的 CSS，它可以正常工作，没有重影。

以下是我的 html/css/js，但我也把它放在了这里：http: //jsfiddle.net/3JznW/

这个问题是因为我的代码而发生的吗？或者这会是一个 Chrome 错误吗？

我玩过这个漂亮的CSS Flexbox 演示页面，我理解了大部分概念，但是我无法flex-shrink在工作中看到。无论我在那里应用什么设置，我在页面上都看不到任何区别。

从规格：

<'弹性增长'>

这个组件设置了'flex-grow'并指定了弹性增长因子，它决定了当分配正的可用空间时弹性项目相对于弹性容器中的其余弹性项目将增长多少。省略时，设置为“1”。

<'弹性收缩'>

这个组件设置了'flex-shrink'并指定了弹性收缩因子，它决定了当分配负的可用空间时，弹性项目相对于弹性容器中的其余弹性项目将收缩多少。省略时，设置为“1”。分配负空间时，flex 收缩因子乘以 flex 基数。

在什么情况下会flex-shrink被应用（即当负空间分布时）？我已经尝试自定义页面，在 flexbox 元素上设置宽度和其中元素的（最小）宽度以进行溢出，但似乎不是所描述的情况。

它已经完全支持了吗？

作为一种解决方案，链接演示中的一组选项或类似 JSFiddle 的现场演示将受到高度赞赏。

我将开始新的布局，并希望使用现代技术构建我的网站。建立新网站的最佳方式是什么？

这些是我一直在考虑使用的：

• 媒体查询+adobe 区域+Flexbox
• 媒体查询+CSS Grid（来自 Microsoft）+Flexbox
• 媒体查询+Flexbox

在开始我的项目之前，我想听听好的建议。谢谢！

我有一个包含三个孩子的 flexbox 元素：

我想将前两个孩子对齐到盒子的顶部，但是对于第三个孩子，我想将它垂直居中。我似乎无法让它工作。这是我尝试过的：

这是jsfiddle：

http://jsfiddle.net/TDUd5/15/

请问有什么建议吗？

我正在制作一些来自 Microsoft Virtual Academy 的视频，偶然发现了-ms-flex或css3中所谓的Flexbox。

我想在html5和css3上实现一个网络应用程序，这个-ms-flex对我很有帮助。

这在移动设备上的基于webkit或fennec的浏览器中是否可用？如果可以使用，有没有使用限制？如果不支持，这些浏览器是否有任何等价物？

我发现：safari有webkit-box，其他浏览器可能还有其他的（Opera、Chrome 和 Mozilla 或 Dolphin）

我有一个在 ie 和 chrome 上运行良好的简单网站，但在 Firefox 中有点时髦。我有一个黄色矩形的 div 和一个位于其顶部的相同颜色的导航栏，但由于某种原因，Firefox 将导航移动到 div 的正下方。这是我的代码：

使用以下CSS：

我正在寻找任何像modernizr（实际上没有）为“旧浏览器”（polyfill）启用flexbox的javascript库。

是的，我知道这是一个非常新的功能（事实上“没有”是一个有效的答案），但我希望有这样的东西，我总是很难水平+垂直居中，这真的会有所帮助并缩短工作。

我的意思是这个 flexbox：http ://weblog.bocoup.com/dive-into-flexbox/ （最新的）

我正在尝试并排对齐 2 个流体 div，这是一个预览http://jsfiddle.net/238ha/ 现在的样子。我想要做的是有两个 div

这是当前代码

这是我想要完成的

图片：占屏幕的 25%

内容：占屏幕的 75%

然而，当用户调整他们的屏幕大小时，div 会变大，但它们可以变小是有限度的。我读过关于 flexboxes 的文章，我认为它们可能会工作，但它们仍然不能很好地支持它们，而且我无法成功使用“flex-flow:row”。我也在网站上使用了很多引导程序，所以如果你知道如何做到这一点，那么引导程序会更好。感谢您的帮助。