问题标签 [flexbox]

这是一个 jQuery/js 专业人士：

我还没有完成这个项目，只是因为我的部分代码行为不一致……。在我写完之后，我听到你们中的一个人说：“代码中没有不一致的行为，只有不想要的行为。”

关于设置的注意事项：

• 在 Web 应用程序中编辑记录
• 使用 .change() 启动我的脚本。
• 字段中的初始值通过 js 与所做的更改进行比较。
• 比较检查新值是否，1) 与原始值相同，2) 列表中的现有值，3) 列表中不包含的新值。
• 使用 jQuery FlexBox 在输入字段上创建类似 google 建议的行为（可能的匹配项会在您键入时显示在框中，但不会强加给您）。

期望的行为：

• 用户可以通过以下方式添加一个新值：1) 键入完整值并离开该字段，2) 键入部分值，然后按 Tab 键以选择建议的值，或 3) 键入部分值，然后单击框中的建议值。
• 逻辑在这些事件之一之后运行。

问题：

• 如果用户单击框中的建议值（上面的数字 3），则逻辑会在该值添加到输入之前运行。这是因为浏览器检测到他们离开了输入字段，从而触发了.change()。这会导致代码将空字符串或部分拼写的单词与现有值列表进行比较。然后逻辑确定他们的选择始终是一个全新的值。

我该如何克服这个问题？

最近我一直在开发一个使用 HTML5/CSS3 的移动优化网络平台。这个应用程序有一个登陆页面，它由四个大小相同的图块组成，中间有一个图标（一些其他样式，比如它们之间的一些填充和边框半径等）。这些图块的大小根据屏幕大小使用“ display: flex; ”显然是由于用户能够更改屏幕方向的性质。

我正在使用以下标记来实现这一点......

HTML

CSS

我遇到了一个相当令人沮丧的问题，即这在 iOS 或 Android 上的 Chrome Mobile（适用于 Beta 版，不适用于当前版本）上根本无法正常显示。

基本上我正在寻找重新编写 CSS 以实现完全相同的布局，但我很难找到另一种方法来做到这一点，非常感谢任何帮助。

我有一个灵活.container的width:100%. 我想将两个肖像图像（宽度不同）并排放入这个`.container`

我遇到的问题： 我正在开发一个.container灵活的响应式布局 - width:100%。但是，我希望能够将两个图像（具有 class .portrait）并排放入此容器中。

正如您在此示例图像中看到的那样，两个.portrait图像的宽度不一定相同？我希望它们具有相同的高度，但宽度应该是动态的（如果它们的比例不同）

纯css（也许是flexbox）有可能吗？还是一点JS？

内容是通过 CMS 动态填充的，所以这就是我无法对其进行硬编码的原因。

有什么创意或有用的想法吗？

请注意，我只需要为我正在使用的嵌入式设备在 Chrome 中使用它。另外请不要给出任何基于浮点数、表格、内联块等的解决方案——我只对 CSS flex 答案感兴趣。

也就是说，我的标记如下：

和CSS：

我想要实现的布局是：

红框的高度应为 100%，最大宽度为 100px；蓝色和绿色框组合的高度应为 100%。谁能告诉我如何使用-webkit-flex来实现这一点？你可以看到我尝试过使用 flex flow 和 flex direction 无济于事。

我用代码创建了一个 JSBin 链接：http: //jsbin.com/usisic/3/edit

谢谢

我想使用一个使用 flexbox 的全高应用程序。我在这个链接中找到了我想要使用旧的 flexbox 布局模块（display: box;和其他东西）的东西：CSS3 Flexbox full-height app and overflow

对于只支持旧版 flexbox CSS 属性的浏览器来说，这是一个正确的解决方案。

如果我想尝试使用较新的 flexbox 属性，我将尝试使用作为 hack 列出的同一链接中的第二个解决方案：使用带有height: 0px;. 它使显示垂直滚动。

我不太喜欢它，因为它引入了其他问题，而且它更像是一种解决方法而不是解决方案。

我还准备了一个带有基本示例的 JSFiddle：http: //jsfiddle.net/ch7n6/

这是一个全高的 HTML 网站，由于内容元素的 flexbox 属性，页脚位于底部。我建议你移动 CSS 代码和结果之间的栏来模拟不同的高度。

我喜欢中心元素占据所有视口空间，当屏幕最小化时，拖到一半。（两边的两个元素都只是美学）是否有任何属性可以在 CSS 或 Jquery 中实现这一点？

我尝试实现一个垂直的项目列表，它在溢出时将它们包装起来并产生一个水平滚动的列表。我想使用 flexbox 来实现这一点。

Webkit 和 IE 产生预期的输出。不是那么火狐。请看这个例子：

JSFIDDLE 示例

请帮我找到 Firefox 的解决方案。

提前谢谢你亚历克斯

给定以下 HTML：

和以下 CSS（无前缀）：

这是一个CodePen。

A被包裹在 a<div>所以它的边距被忽略。

问：如何使用弹性盒模型实现（边距）B的行为？A

注意： div 包装器可以深入多个级别

定位：最新的 Chrome/Safari/iOS

非常感谢您的帮助！

编辑：感谢@JoséCabo，我想出了这个：

代码笔

铬合金：

苹果浏览器：

不幸的是，正如@cimmonon 提到的，它在 Safari 中不起作用，所以我仍然需要一些帮助。

在这个 codepen 示例中：http ://codepen.io/DrYSG/pen/ovctn我创建了三个 flexbox。我想要的效果是当一个人悬停在中间的盒子上时，它会变大（演示中的颜色变化只是为了帮助我了解悬停）。

在 FireFox v19 中，这几乎可以正常工作。但奇怪的是它选择了动画的开始和结束宽度。

在 Chrome v25 中，我得到了快速不稳定的状态振荡（闪烁）。真的不正确。

在 IE10 中，我得到了与 FireFox 相同的过渡，但没有平滑过渡。

我仔细阅读了这个stackoverflow主题

以及csstricks中的这篇文章

并尝试使用 all 前缀使我的布局在现代浏览器中工作，但它只在 Chrome 中工作。在其他浏览器中，flex 项目丢失了 flex 值（宽度）。我不明白这是怎么回事。
我非常感谢和帮助和建议！谢谢！ 演示

}