问题标签 [flexbox]

场景：我有一个div#wrapper带有以下css的元素：

这个包装器包含三个子<section>元素，为了清楚起见，我们将它们称为 Sections A、B 和 C。所以这给我留下了这样的东西：

美丽的。问题是：我现在正在处理媒体查询，并且需要在 < 800px 时更改此布局。具体来说，我需要将 B 部分移动到 A 和 C 部分下方并使其全宽。这是一张有助于解释的图表：

问题：是否可以将单个子元素从其灵活的盒子中分离出来并以这种方式改变布局？

尽管我在谷歌上搜索，但我发现很少有关于如何实现多行 flexbox 的示例。我从示例中获得的代码都没有工作。我在一个 flexbox 中有三个元素，我希望第一个元素位于顶部，第二个和第三个元素位于底部一行。

我试过使用这些属性：

并给它一个设定的宽度，但它仍然不会换行，即使第一个元素的宽度为 100%。我是否缺少某些供应商前缀或者我的语法错误？

我有以下列表：

有款式

假设父容器是 800px x 600px 的固定大小，我希望内容垂直流动，然后水平流动，这样最终的布局将是：

如何使用 (webkit) flexbox 实现这一点？一旦第三个列表项到达父容器的底部，我似乎无法让列表项流动。请注意，我想要水平滚动，因为列表中的项目数量是不确定的。

我想让以下内容垂直填充视口：

http://codepen.io/anon/pen/lkpKu

但是，应用height: 100%到外部 div 只要它有display: flex.

这是从：

http://codepen.io/chriscoyier/pen/qazmI

水平填充视口没有问题。

有什么办法可以做到这一点？我愿意看到黑客，但理想情况下，这不需要我使用 Javascript 手动实现相同的效果（我知道该怎么做，我不问）。

我只是想让它在最新的 Chrome 上运行。

我有几个宽度未知（动态宽度）的 div。如何自动调整这些 div 的大小以适应浏览器宽度？

例如，我有 5 个宽度不同的 div。如果浏览器宽度只能填满 3 个 div，那么这 3 个 div 将自动调整大小以适应浏览器宽度，其余部分将显示在第二行。

如何使用 html5 和 css3 制作它。我知道 css3 中有一个新功能 flexbox，但我不确定我是否可以处理它。

我正在尝试在 CSS 中创建一个灵活的布局，该布局将根据客户的分辨率进行包装。

例如，在横向（1024px 宽）的 ipad 上，我想显示以下内容：

但是在纵向（600px 宽）的剧本上，我想显示以下内容：

除了 20px 的边距外，我几乎所有的东西都在工作。我似乎无法弄清楚如何指定包装元素的边距。

这是我的代码：

HTML：

CSS：

代码假定浏览器是一个有效的 webkit 浏览器。

我会很感激一些帮助。感谢您的时间。

MAJ：添加代码笔： http ://codepen.io/anon/pen/srGwq

我开始为一个非常具体的项目处理 flexbox。由于文档多次更改频繁，我不处理我的问题。

这是我的html：

还有我的 css（不带 lisibility 前缀）：

所以，结果是这样的：

通过媒体查询，我更改了 box-ordinal-group 和 box-orient 以在移动设备上获得此结果：

所以问题是，我需要将 .left 和 .right 垂直对齐放在平板电脑的一个左列中，如下所示：

我尝试将 .left 和 .right 放入 box-ordinal-group:1 并将 .middle 设置为 box-orginal-group:2 但结果是 .left 和 .right 在左侧水平对齐，我会它们要垂直对齐。

由于我对 Flexbox 不太了解，欢迎您体验。也许这是不可能的。

谢谢，对糟糕的架构感到抱歉，我还没有获得发布图片的机会。

我怀疑这可能需要 Flexbox（或者更容易使用），但也许有人有想法/解决方法。我有这样的结构：

截面宽度：100%。我希望第一个 div（向左浮动）根据文本拉伸到不同的宽度，并且我希望第二个 div 占据部分剩余的任何百分比。每个 div 可能包含浮动在其中的各种其他 div（它们反过来将使用百分比作为宽度）。这可能吗？

编辑：好的，我认为更大的问题是，在第二个 div 中，我有一个宽度为 % 的浮动 div，但它的父级是宽度自动......所以它不会正常工作吗？密码笔

该示例可以在http://jsfiddle.net/GGYtM/找到，这里是所要求的内联代码：

在 Firefox 中，“根” div 元素不会增长到适合父元素的宽度，但会占据适合内容所需的空间 - 这是完美的。然而，在 Chrome 和 Safari 中，“根”div 元素会增长到占据父容器的整个宽度。这种差异的原因是什么？理想情况下，我想实现 FF 行为，这是完美的。

我无法让 css3 灵活框布局模型在最新的 chrome 中工作，例如：

（这个的jsfiddle）

在上面的示例中，所有元素在主轴上正确弯曲，div 和 span 也在交叉轴上正确拉伸，但是输入和文本区域在交叉轴上没有正确拉伸。根据规范，他们应该。

我不是在寻找解决方法，而是想知道我是否做错了什么或者我在规范中遗漏了什么会阻止它工作的东西。