问题标签 [flexbox]

这是一个关于新的灵活框布局模型的问题。

假设在display: flex;我有两个项目的容器内。当容器足够宽时，两个item都是水平布局的，否则flexbox布局机制会让它们垂直堆叠。我想要的是当它们彼此相邻时在两个项目之间有一个内边距，但我希望当它们必须堆叠在一起时这个边距消失。

FlexBox 模型可以做到这一点吗？

例如，可以使用以下文档，该文档已使用最新版本的 Chrome 进行了测试：

​ 当外层 div 有足够的水平空间时，“一”和“二”并排显示，中间没有空格。一旦缩小浏览器窗口，两者就会垂直堆叠。我想让两个段落彼此相邻时用一个边距分隔。

http://jsfiddle.net/WHYS2/

请看一下这个 jsFiddle并按下唯一的按钮来填写列表。如您所见DIV，列表中的元素已调整大小以填充包含的父级。这段代码正是我想做的，但我认为我实现它的方式对于这样一个看似简单的任务来说太复杂了。以下是为内部元素分配高度的算法的代码：

我的问题是，我们能做到最好吗？是否有任何其他方法（希望更快或更优雅）以合理的跨浏览器兼容性来实现此功能？我只需要支持较新的 Firefox、Chrome 和 Safari。我在这里阅读了 flex-box并查看了它的有前途的规范，但它看起来不像 flex-box 可以在浏览器中一致地进行加权灵活布局。如果我错了，请给我一个简单的例子来说明如何实现这一点。

这种类型的加权灵活线性布局并不少见，例如它在 Android SDK 中作为布局选项之一提供。相对于分配给它们的权重值，调整元素大小以填充其父容器的推荐方法是什么？如果可能的话，一个纯 CSS 解决方案会很棒。

我正在使用最新的灵活框规范（据我所知，目前仅受最新的 Chrome 支持）并试图阻止 flex 项目超过最大高度。

最好用一个例子来解释：http: //jsbin.com/efedof/2/edit

第一个例子.content（加上两个.bar元素）没有超过 的高度300px，所以是正确的。但是对于第二个示例，文本将底部.content向下推到.boxdiv 之外。

如何强制三个组合的 flex 项目的最大总高度，以便该.content区域变得可滚动而不是拉伸到外部并将.box推出？.bar.box

谢谢。

到目前为止，我将三列放在一个垂直框中（还不能发布图片，所以这里有一个链接）：http: //imgur.com/4Y34c

css

问题是我不知道如何让蓝色框与第三列的底部对齐。我尝试了所有对齐属性，我一定做错了。有任何想法吗？？？

我有一个水平弹性盒，里面有类似的几个元素。每个都包含在一个中以启用项目之间的选项卡。我正在使用嵌入式 webkit，因此需要 Chrome 来查看我想要实现的效果。

我可以在项目之间成功地使用标签，但是如果一个项目离屏幕右侧太远，我希望该项目能够进入视图。但事实并非如此。示例代码可以在这里看到：

http://jsfiddle.net/sRGWS/

哪个使用这个：

我在下面创建了一个小提琴。第一个下拉菜单使用的是灵活框布局。我试图替换下面由浮动组成的第二个菜单。

Afaik 浮动内容使其脱离了通常的“流程”，这就是为什么我的浮动示例看起来更好的原因。我的目标是使用灵活的盒子布局来完成类似于浮动导航的事情。我不希望在悬停菜单时下推内容。我希望它像浮动示例一样重叠。我想底线是，我不希望 Flex 容器扩展到包含悬停菜单的整个高度。

我怎样才能做到这一点？感谢您对此的任何意见。

http://jsfiddle.net/hRKgV/

我只添加了 webkit 语法，但小提琴似乎适用于所有主要浏览器（猜想这是由于小提琴的工作原理）。

如果它对其他人有帮助（我对此表示怀疑），几乎可以通过添加以下内容来完成：

当然，我尝试这种新模型的原因是不必使用其他解决方法。希望这有助于了解我想要完成的工作。

想知道是否可以仅使用新的 flexbox 布局获得与 pinterest 或 jQuery masonry 相同类型的设计布局。据我所知，这是：

和 HTML 我只是使用 PHP 循环来创建 12 个项目

Flexiejs.com有 CSS 弹性盒子的浏览器 polyfill，但它基于该主题的早期草案，与当前的 W3C 候选推荐CSS 弹性盒子布局模块不兼容。CR 中定义的弹性盒是否有任何填充物，至少是部分填充物？

我最近开始玩 CSS3 flex box，我已经阅读了很多资源并自己玩弄了它。我浏览过：http ://www.w3.org/TR/css3-flexbox/

具体来说，我在子元素上的 flex 属性上遇到了问题：

我似乎无法理解negative-flex 参数是如何工作的。positive-flex 是有意义的，因为它将空间从父元素按比例分配给子元素。

根据我的理解，负弹性应该在元素溢出父元素时缩小元素。但是，我无法让它发挥作用。任何帮助理解将不胜感激！

这是我一直在测试的代码：http: //jsfiddle.net/nxzQQ/2/

HTML：

CSS：

我有一个包含两个子弹性项目的弹性框标题。这些弹性项目反过来有自己的孩子。

有没有办法覆盖弹性项目的垂直对齐方式，以便它们的子项在底部对齐？