问题标签 [flexbox]

我有两个并排的 div 元素。我希望它们的高度相同，并且如果其中一个调整大小时保持不变。如果一个增长是因为文本被放入其中，另一个应该增长以匹配高度。不过我想不出来这个。有任何想法吗？

I am trying to resize an image to be the width of its parent div; normally width: 100%; works fine, but when the parent has display: box; the img is not resized. Giving the child image box-flex: 1 has no effect.

我想要一个组合框并为它设置一个初始值。但我仍然希望用户能够单击以查看与初始值不同的选项的下拉列表。

我想到的一个例子是谷歌地图的公共交通方向。可以看到，在最右边的组合框中，初始值设置为当前时间。但是用户仍然可以单击箭头并查看与初始值不同的值的下拉列表。

我查看了FlexBox，但每当我设置初始值时，下拉列表中只会出现该初始值。您可以在此演示 #7中看到这一点。

有什么方法可以配置 FlexBox 来满足我的需要吗？或者我可以使用另一个组合框吗？谷歌在他们的谷歌地图组合框中使用了什么？

谢谢。

我已经将 Flexbox 实现为课程列表的自动完成解决方案。我只是以正确的 JSON 格式向它传递了从数据库中获取的课程的完整列表。我的印象是它会在我键入时缩小匹配列表的范围，但它只是打印整个列表并突出显示匹配的字符。

我是否必须编写自己的服务器端脚本才能在键入时动态缩小结果范围？我认为传递一个列表就足够了，因为文档特别指出：“在所有调用“results.aspx”的示例中，数据是一个包含 105 个英文单词的列表”。

感谢任何人的意见。我的代码如下：

今天，在 FF4 中使用灵活的盒子模型时，我注意到我无法使用margin: 0 auto;.

有人知道这个容器居中的任何方法吗？在 Webkit 中，它按预期工作。

试着想象一种情况

有一个 div ，容器内有三个 div ，

有时我们需要让里面的div自适应。

像这样

CSS：

html:

但是 a-1 ,a-2 , a-3 不自适应。我的意思是 a-1 a-2 a-3 长度不相等。它似乎也取决于文本长度。

怎么解决？

我成功地使用了灵活的盒子布局，但需要将一个元素绝对定位在其中一个盒子内。

我已阅读http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#flex尤其是：灵活性仅适用于正常流程中的元素。由于绝对定位和固定定位的元素不在流动中，因此它们上指定的任何灵活性或 flexgroup 都将被忽略。

具体用途是嵌入谷歌地图，它的 DIV 定位绝对准确，或多或少不受我的控制。最终结果是 DIV 相对于包含我的灵活框布局的第一个非框元素而不是我放入的框元素定位。我假设这是因为它是最后一个具有真实位置的元素.

我理解为什么会发生这种情况，但是有没有人知道将绝对定位的元素放在灵活的盒子元素中的解决方法，这样绝对定位的元素的位置相对于灵活的盒子元素。我认为这是有道理的。

O。

我正在尝试使用新的 css3 flexbox 模型进行布局。我想要一个占据 100% 高度的页面，使用具有固定的页脚和页眉，其余内容位于中间的列上。内容列应占据宽度的 100%，直至达到固定的最大宽度。此外，一切都应该在中心对齐。

我设法在这个演示中完全按照规范构建它，它在 chrome 或任何基于 webkit 的浏览器中运行良好。但它在 Firefox 中中断，添加“最大宽度”属性会使所有内容都成为与左侧对齐的固定列。

谁能启发我为什么这在Firefox中不起作用？这是对规范的不同解释，还是我的代码中有错误？

这是演示的 HTML：

这是CSS：

在尝试了 css3 flex-box proporty 之后，我很快注意到 Chrome 和 Firefox 的一些差异。

特别是：如果您在一个应该是 flex 的元素上设置宽度，firefox 将根据它的需要来调整元素，它会考虑宽度样式，但它只是一个变量。

Chrome会充分尊重with风格，

一个例子：

如果框内的 2 个 div 分配了相同的宽度，则 chrome 将使它们的大小相同。Firefox 将重新考虑第二个 div 需要更多空间，因此它会得到更多分配。

谁是对的？

这是我的代码的一个小提琴：http: //jsfiddle.net/kizu/GCahV/（在 Firefox 和任何其他现代浏览器中比较它）

我想要达到的目标：

1. 必须有一个包含两部分的内联块（或至少一个带有 的块float）：左和右。
2. 这些部分必须是并排的并且必须是灵活的，右边的部分可以完全不存在。
3. 父块必须有一些max-width（在%或固定在px）。
4. 当左边的部分足够大时，它必须溢出，但右边的部分必须始终显示出来。

使用inline-block,我使它在最新的 Chrome、Safari 和 Opera 中运行良好，但令我震惊的是 Firefox 有一个错误：当右侧部分较长时，左侧部分会缩小float。overflow: hidden

我发现的唯一 CSS 解决方法是尝试在 flex-box 模型中为 Fx 定位元素，但这并不完美：我无法让父级拥有max-width（或width根本没有）。

这是我迄今为止最好的尝试：http: //jsfiddle.net/kizu/GCahV/1/

所以，问题是：

1. 有没有办法让 Firefoxmax-width理解.b-shrinker？
2. 对于这个 Firefox 的错误或完全不同的方式来做我想做的事，是否有任何其他CSS 唯一解决方法？