问题标签 [flexbox]

我的 main<div>有一个固定的高度，但是当我尝试使用box-orient: horizontal它时，它们都保持在 first 之上<div>，即使有溢出黑客。

我被困住了。这就是我需要的：

这个代码：

我正在尝试填充 Flexbox 内的弹性项目的垂直空间。

这是JSFiddle

flex-2-child不填充所需的高度，除非在以下两种情况下：

1. flex-2高度为 100%（这很奇怪，因为弹性项目默认为 100% + 它在 Chrome 中是错误的）
2. flex-2-child有一个绝对位置，这也很不方便

目前这在 Chrome 或 Firefox 中不起作用。

我对订购元素有疑问。我有一个容器（flexbox）和一个孩子（order = 1）和兄弟div（包装器我不会使用flexbox），孩子订购但不起作用。

可以查看完整示例：http ://codepen.io/isyara/pen/HtniA （检查包装器 im-changed-order）

谢谢

我正在制作一个网站，我制作了一些按钮并向它们添加了 -webkit-box-flex 属性。它工作得很好。但是，当我向其中一个按钮添加下拉菜单时，-webkit-box-flex 属性不再适用于它们并且它不起作用。谁能告诉我发生了什么？

这是一个jsfiddle：

http://jsfiddle.net/hGT6E/

谢谢！

我知道“flex”属性可以使 flex 项目在一个方向上吸收额外的空间（如果“flex-direction”值为“行”，则将吸收行中的额外空间。）

但是，如果我包装这些物品怎么办？第二行中的项目只是吸收了第二行中的额外空间。但是，如果有的话，它们不会吸收垂直方向的空间。

也许演示可以让你更清楚地理解我。

我希望item5可以紧跟在item2之后。除了边距之一，没有多余的空格。

有人可以帮我弄清楚吗？

当绝对位置与居中的弹性框项目一起使用时，我遇到了这个问题。它在 Firefox 中不起作用。

这是链接。

HTML

CSS

知道如何解决这个问题，因为我需要在 div 中使用绝对位置？

我正在尝试使用一些新的 css3 技术创建一个垂直导航菜单，但到目前为止，我只能使用display:table. 我不喜欢使用display:table/table-row/table-cell主要是因为它们将“单元格”限制为表格形式（例如，您不能将“行”或“单元格”与边距隔开），而且我也不喜欢divs仅用于制作的额外内容列表垂直。我最初走向这个方向的原因是vertical-align: middle用于文本。当我尝试使用弹性框方法时，它总是将两行文本放在同一行，我不知道如何拆分它们。

你能帮我实现同样的外观，但更灵活，最好不要额外的 div 吗？

方法的工作示例display: table（但似乎并不完全居中）：http: //jsfiddle.net/jKRDQ/

最近我使用弹性盒方法：http: //jsfiddle.net/4wSN5/

最接近没有 CSS3：http: //jsfiddle.net/6gRcp/

我正在开发一个菜单栏，它的所有按钮均匀分布在导航元素（容器）的中心。我需要这种布局在大多数设备上看起来都很好，不管它的大小。问题是，在我正在测试的一种平板电脑尺寸下，只有一个按钮进入下一行，留下了不受欢迎的外观。有没有办法使用 css 让所有项目均匀分布在所有行上？

这是导航的样式块：

有没有一种特殊的方法可以使用弹性框（或其他纯 CSS）在元素中垂直居中文本？

小提琴：http: //jsfiddle.net/WK_of_Angmar/JZZWg/

我不明白为什么 Firefox 和 chrome 中的负相对定位不同。我也不太确定 Flexbox 是最新的还是可以工作的。 例如

在Firefox上工作机智：

在Chrome上适用于：

演示：

http://jsfiddle.net/3fJqZ/48/