问题标签 [flexbox]

鉴于我有这个 HTML 代码：

和 CSS：

如何设置锚的样式以使其水平居中？

我第一次在我的 css 中使用弹性盒子模型。在 Chrome 和 Safari 中一切都很好，但 Firefox 就是一团糟，而且我还没有在 PC 上测试 IE。我是否为弹性盒模型使用了正确的属性？请在http://www.emilydiane.net/ebbg/styles.css查看我的样式表

谢谢 ：）

使用“旧”的 flexbox 实现，我会使用-webkit-box-align: start;并排停止相同长度的列。

我不知道如何在新规范下执行此操作 - https://developer.mozilla.org/en/Using_flexbox。

我的主要 div 是<div role="main">，它<section class="app">在 div 内并排有两个。

我已将 Chrome 更新到版本 21。我使用 flex 属性定义了一些 css 样式：

但是我发现在新版chrome中失去了所有效果，所以我尝试更改为：

head 3 属性已正确更改，最后-webkit-flex-direction仍然无法像以前那样工作，但开发工具的 chrome 显示属性正确

演示在这里，我想使用属性h1在列中进行排序

我该如何解决这个问题？或者应该添加一些属性？

对于列表，我考虑了以下布局。每个列表项由两列表示。第二列应占用所有可用空间，但如果第一列占用太多空间，则应以最小尺寸将其固定在右侧。然后第一列应该显示一个省略号。

问题发生在最后一种情况下。当第一列包含太多文本时，它没有显示省略号，而是将自身拉伸到弹性框之外，导致出现水平滚动条，并且第二列没有锚定在右侧。

我想让它像这样呈现（样机）：

我怎样才能做到这一点？

这是 样品小提琴。

我正在尝试将设计迁移到新的 flexbox 规范（display: -webkit-flex;而不是display: webkit-box;）。尽管overflow: auto;除非我在溢出的容器上设置明确的高度，否则该属性似乎被忽略了。

工作示例：

旧规范的实现

使用新规范实施

我做错了什么，还是这个新规范还没有完全完成？

I'm trying to use the css3 flexbox module in order to have table columns that can stretch, but still have a default width, as well as having a min-width and max-width.

This works well when the viewport is wide enough to hold the minimum widths for each column, but when the viewport shrinks, all the columns collapses. Is there any good way to make sure that the min-width/width is always maintained for flexboxes, or is there any other way to have table columns that can "flex". I've only tested this with Chrome 21 so far.

CSS:

HTML:

我正在尝试在 Windows 8 商店应用程序中创建一个水平灵活的屏幕，其中有几个水平延伸的组（包含在外部 Flexbox 中），以及垂直列出的组下的各个字段，根据需要从屏幕底部包裹到顶部（包含在一系列内部 Flexbox 中）。这是与分组的 Windows 8 ListView 类似的布局，但是因为我正在显示与单个数据项相关的字段，并且某些部分将在页面的其他位置包含 ListView，所以我不能使用列表视图来显示数据。

每当内部 Flexbox 部分换行到新列时，我都会遇到问题：放置在换行 Flexbox 之后的 Flexbox 出现在一个列宽之外，而不是前一部分的列宽多少。这在以下屏幕截图中进行了说明：

跟我想的不太一样！我想要的如下所示（通过手动设置溢出部分的边距创建。）

该页面的 HTML 如下：

至于CSS：

有什么方法可以通过我拥有的弹性框设置来实现我在第二张图片中的目标吗？如果没有，是否有另一种方法可以让页面上的内容水平地跑到需要的地方？我希望应用程序像网格视图一样流畅灵活，但正如我所提到的，我无法使用它。

我有一个应该定期堆叠的 3 个块元素的列表。堆栈中的第二个元素是一个盒子元素，我使用了

问题出在这个 box 元素上，因为它在自身顶部添加了一个奇怪的不需要的边距。您可以通过以下链接查看它http://jsfiddle.net/frapontillo/ghA5X/。

Chrome 中的正确行为：

Firefox/Aurora 中的错误行为：

什么会导致这种情况？Chrome 运行良好，而 Firefox（发布渠道）和 Aurora 有这个问题。

渲染内容后，我在获取 flexbox 的确切宽度时遇到了问题。我正在开发一个 Windows 8 应用程序（ie10具体的意思）。

这是代码：
[HTML]

[CSS]

[JAVASCRIPT]

我期待宽度是别的东西，因为有一个滚动条。外层容器宽度为400px，中层为继承width和heightwith overflow: auto，最内层是可扩展的。flexbox 中有八个项目，100px每个项目都有宽度和高度。所以我期待 flexbox 宽度 abot900px (i.e. 100px*8 + margin-left and margin-right for each item)但仍然400px只得到父尺寸。我错过了什么吗？

这是 JS Fiddle 的链接：http: //jsfiddle.net/pdMSR/ [仅使用 ie10 打开]