flexbox相关内容
我正在构建一个严重依赖 flexbox 的网站.唯一的问题是我无法让它模仿 Firefox 上的 chrome 行为.我查看了 CSS-Tricks、SO 和这篇文章 (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/) 所有这些都非常好，并提供了一些很好的建议，但没有一个对我有用.我尝试设置
..
我有一个容器作为整个窗口的高度/宽度.在这个容器内，我想要一个垂直的形式&水平居中.下面，我还想要在容器底部基线上的一份副本.类似于下面的糟糕插图.现在我只能让它们都垂直居中，并且找不到一个很好的方法来将底部复制固定到容器的底部. ---------||||||||||--------- .container {背景色:#eee;高度:100vh；宽度:100vw；填充:1em；显示:弹性；文
..
当内容溢出 flex 容器时，Chrome 似乎没有正确处理 justify-content: space-around，并且容器没有设置为允许环绕，而是水平滚动. flex 容器左侧部分内容溢出，被截断.我希望它在右侧溢出，以便我可以通过水平滚动到达它. 这是一个例子: #container {显示:弹性；宽度:500px；justify-content:空间环绕；边框:纯黑色
..
好吧好吧，我知道了.这个问题被问了很多.但是，到目前为止，我还没有找到可行的解决方案.我把我的页面归结为仅此而已:
东西 而且还有一个水平滚动条.在开发工具中，我可以找到 row: .row {右边距:-15px；左边距:-15px；} 如果我取消点击 margin-right: -15px; 那么问题就会消失.但是，在我的实际页面(包含所有
..
我希望摆脱媒体查询，只使用 flexbox 来解决我的问题，但我不确定这是否可行.随着窗口变小，我希望列缩小，直到达到最小宽度.一旦他们击中那个，中间的柱子就会跳下来包裹. 我认为我的问题归结为这个 - flexbox 可以检测到它何时包装?如果是这样，我可以提示它使用严格的 CSS 更改包装项目的顺序吗? 这是我尝试使用媒体查询完成的codepen.> .wrapper {显示
..
我找到了这篇文章，Flex item带有图像的孩子不会从其原始宽度进行调整，我最初认为这是有答案的，但它没有，......当使用设置高度时，部分确实如此. 我想要并期望在这里发生的是图像与文本元素的高度匹配，然后在保持其比例的同时调整其宽度. 这似乎适用于 Chrome，但不适用于 Edge/IE/Firefox.由于我没有 iOS 设备，因此无法测试 Safari，因此如果有人可以分
..
我这里有一个 简单的 plunker. .container {显示:弹性；flex-flow: 行 nowrap;对齐内容:间隔；对齐项目:居中；最小高度:4em；}.nav {弹性:0 0 4em；高度:1em；}.标识 {弹性:1 0 自动；对齐自我:伸展；} 这是我希望在 Chrome 49 中正常工作的方式: 但不是在 IE11 中: 我已经检查过 IE 未处于兼容模式
..
要同时水平和垂直居中，有两个简单的选项: 第一次 .outer {显示:弹性；}.内{保证金:自动；} 第二个 .outer {显示:弹性；对齐内容:居中；对齐项目:居中；} 有什么区别?在什么情况下我们会使用其中一种? 解决方案 在你的第一个例子中... .outer {显示:弹性；}.内{保证金:自动；} ... auto 边距仅适用于 flex 项，并在容器中居中该
..
我很好奇这种布局是否适用于 flexbox.我似乎无法解决 div 3 &4 属于 #2.这对于浮动很容易，只是好奇我是否遗漏了一些可能对 flexbox 有帮助的属性. 布局 +-------+-------+-------+|div 1 |div 2 |+ +-------+-------+||div 3 |第 4 格 |+-------+-------+-------+ 标记
..
有一次我正在为此考虑 CSS 规范建议，但后来我想可能已经有一个我缺少的解决方案.我正在谈论的布局类型的示例如下所示: +-----------+---+|1 |6 |+---+---+---+ ||2 |3 |4 +----++---+---+---+ 7 ||5 ||+-----------+---+ 问题是左列中间的那三个框是沿横轴堆叠的，我在CSS中找不到这样做的机制.我知道这可以用围
..
在对 inline-flex 元素应用清除修复时，我有一个奇怪的行为.当我为具有 inline-flex 显示属性的元素设置 clearfix 时，奇怪的空白出现在它之前: 但是当使用 inline-block 时，行为是不同的: 我不明白为什么 inline-flex 与 inline-block 有不同的行为......以及为什么它有那个奇怪的空间. .a,.b {边框:1p
..
为什么 flexbox 不能与 fieldset 或其他非 div 标签一起正常工作?我希望它们像 div 示例中那样彼此相邻排列，因为 flex-direction: row; 在 flexbox 中是默认的.但是 fieldset 是强制对它们应用宽度，我不明白为什么. HTML
fieldset flexbox
1
2
..
在过去的好日子里，webkit 中存在一个使用纯 css 来夹紧线条的技巧: display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient:垂直； 尽管此语法与 display: -webkit-flex 语法愉快地共存，但在所有基于 webkit 的现代浏览器中，它被认为已过时. 我的问题是: 如何在没有过时的 '-w
..
我正在尝试使用 display: flex; 运行良好，直到我的商品尺寸不同: 这里是例子:http://jsfiddle.net/2pL3j07x/1/ 我希望 小 物品低于 大 物品以包裹(大物品下方的“行"中的 2 个物品应该很适合但只有 1 个去那里) css flex 可以这样做吗? 解决方案 我知道你不想使用转换，但是这完全按照描述的方式工作，并且实际上
..
我有一个问题，我在一个 div 中有三个浮动按钮.其中一个按钮的内容比其他按钮多，因此它更高. 我希望能够使所有按钮与最高按钮的高度相同.我试过 height: 100%; 但这没有用. .容器 {宽度:320px；}.容器按钮{向左飘浮;背景:#FFFFFF
..
当我从 flexbox 中移除一个项目时，剩余的项目会立即“对齐"到它们的新位置而不是动画. 从概念上讲，由于项目正在改变它们的位置，我希望转换能够应用. 我已经为所有涉及的元素(flexbox 和子元素)设置了 transition 属性 有什么方法可以对 flexbox 进行动画编辑(添加和删除)?这对我来说实际上是一个亮点，也是 flexbox 的一个缺失部分. 解决
..
我一直在使用下面提到的代码，它适用于我的 Chrome，但不适用于我的 IE9 和 Safari. 我在谷歌上搜索了解决方案，尽管我得到了各种供应商前缀，但这些结果让我感到困惑.
解决方案 CSS Flexbox 模型针对 UI 设计进行了优化.它的开发主要是为了避免父元素溢出.当祖先元素大小被限制时，它会缩小子元素.当祖先元素大小扩展时
..
我在父 div 中有三个 div，它们使用以下方法隔开: display: flex;对齐内容:间隔； 但是，父 div 上有一个 :after ，这使得三个 div 不会到达父 div 的边缘.有没有办法让 flexbox 忽略 :before 和 :after ? codepen.io .container {宽度:100%；显示:弹性；对齐内容:间隔；填充顶部:50px；背景
..
我在容器中有未知数量的元素，需要在外部没有边距但它们之间有最小边距的情况下进行包装. 我还需要用 space-between 和最后一行左对齐来证明这些. 我正在尝试使用 flexbox 来做到这一点: .outside {边框:1px纯黑色；}.容器 {边距:-5px；显示:弹性；flex-wrap: 包裹;对齐内容:间隔；}.容器:在{之后内容: '';弹性:自动；}.盒子
..
给定 9 个 div 一个接一个，我想通过 CSS 创建一个 3X3 的网格. 我该怎么做? .cell {高度:50px；宽度:50px；背景色:#999；显示:内联块；}.cell:nth-child(3n) {背景色:#F00；/* 我应该使用什么属性来在这个元素之后换行?*/}/* 这不起作用；至少不是在 safari */.cell:nth-child(3n)::after
..
