flex-grow如何与flexbox一起工作？
我有3个div，如果我给前两个div给 flex：0.5 ，最后一个div应该移动到下一行，如果我给了 flex-wrap：wrap 。 以下是我的html / css： .parent {display：flex; height：100px;背景颜色：红色; flex-wrap：wrap;}。child-1 {background-color：green; flex：0.5;}。c
..
flexbox相关内容
在容器本身包裹在主容器中之前，使flex项目在嵌套的flex容器中换行
如果我有一个包含多个容器的flexbox容器，我如何使容器的包含的项目包装容器本身之前？ 例如（ codepen ）： HTML
..
flex-item的`display`属性的允许值是什么？ （flex-item的孩子的布局是不相关的）
Flex容器的所有子项（由 display：flex 或 display：inline-flex 指定）弹性物品。 Flex项目没有显示属性;相反，我们将其设置为一些其他值，具体取决于我们希望如何布置flex项目的子项。 因此，如果我将显示为为Y元素上的X值（考虑到Y参与flex上下文，也就是Y是一个flex项目）我可以确保我总是获得flex-item行为（在这种格式化上下文，在flex容器
..
垂直居中flexbox项目中的文本
justify-content：center 我想要flex项目采取全高度， / code>不工作，并且项目本身的 align-self：center 缩小它的高度，以它自己的内容，而我想要所有项目 在此示例中，我要将数字垂直居中： http://codepen.io/ilyador/pen/ogYbWO?editors=110 解决方案 我可以用下面的方法完成你的数字的垂直居中：
..
Flexbox在Safari中不工作
我创建的布局在Safari中不起作用，虽然它在Chrome中工作得很好。我有一个感觉，它与 .wrapper 或 .frame 有关，但我已经尝试设置Flex将值缩小到 0 无效。 JSFiddle .frame { display：-webkit-flex; display：-ms-flexbox; display：flex; height：100vh; posi
..
绝对定位的flexbox不会扩展以适合内容
从下面的代码段可以看出（查看为小提琴），一个绝对定位的柱状弹性箱 例如，在Chrome中，它将只有最宽的子元素宽度，并且只有最短的列。 编辑：的项目将是动态的，每个项目中的文本也将是动态的。 * {box-sizing：border-box;} ul {background：＃090;显示：flex; flex-flow：柱包装; left：0; list-style：none
..
如何使用css3 flexbox创建多列布局而不垂直扩展？
我在Chrome中使用css3的flexbox（无需担心跨浏览器）。我很难说服我按照我想要的方式布置我的内容。这里是我的目标草图： 这是我的尝试的jsFiddle： http ：//jsfiddle.net/Yht4V/2/ 这看起来工作得很好，除非每个 .group 将扩展其高度，而不是创建多个列。 我在这里使用flexbox。 body 垂直放置， #content div占据页面
..
如何使用“flex-flow：column wrap”？
flex-flow：row wrap 很容易理解。如果没有什么是“flexing”，它的行为类似于内联元素;它流向右边，直到它不再这样做，这时它创建一个新行。 flex-flow：column wrap 与 display：flex 是类似的。它向下流，直到它不再流下（ max-width ？），然后启动一个新列。当然，因为父类是 display：flex ，它是一个块级元素，所以该列将中途
..
IE11 - flexbox和vh高度单位不兼容？
..
..
CSS flexbox：align-items和align-content之间的差异
我发现CSS flexbox属性中的 align-items 和 align-content 之间的区别非常混乱。我一直在查看文档，几个例子在线几个小时，但仍然不能完全抓住它。 更准确地说， align-items 对我来说是完全正确的，它是完全清楚它的行为。另一方面， align-content 根本不清楚。特别是，我不明白为什么我们应该使用两个不同的属性取决于内容是否适合一行或多个。
..
html5：具有固定顶部/底部和可滚动中间的三行弹性框
可以使用固定页眉/页脚和可滚动的 html5 c> article 部分，例如 firefox 24和 chrome 31？ + ---------- + |头| + ---------- + |文章|| | || | || | || + ---------- + |页脚| + ---------- + （简化）： body
..
CSS3 Flexbox全高应用程序和溢出
我有一个应用程式使用像下面这样的布局的经典电子邮件。 我使用新的CSS3 flexbox模型构建它，它的工作非常出色，直到我添加了用户的能力动态添加文件夹框中的新项目。我本来希望flexbox的工作方式，只要有空间留在文件夹框中，它不会开始增长到下面的任务框。不幸的是，这不是我看到的（在Chrome 17中）。 我已经构建了一个JSFiddle 这里演示了问题。只需点击添加文件夹链接，
..
Flexbox圣杯布局：固定标题，固定左导航，流体内容区，固定右侧边栏
我尝试使用Flexbox建立「圣杯」布局。 固定标题 固定，可折叠，可滚动左导航 灵活内容区 固定，可折叠，可滚动右导航 见下文： > 我有一切工作，除了标题下的“应用程序”区域的高度。现在是 100vh （视口高度的100％），但这包括64px标头。 $ b 这是我的基本HTML结构： b
..
CSS3 flexbox调整垂直对齐元素的高度
是否可以使 .item-1 高度灵活并调整 .item-2 height？例如： 如果 .item-1 height为 10％然后 .item-2 height为 90％ 如果 .item-1 height为 11％，则 .item -2 height为 89％ 根据 .item-1 的内容，我们应该调整它的大小。 HTML
..
最小宽度渲染不同地在flex-direction：row和flex-direction：column
我有一个容器 display：flex 和 flex-direction：row 。 在这个容器中有一个子容器，也有 display：flex ，但是 flex-direction：column 。 问题是如果我在子容器中添加一个输入， min-width 的输入将被忽略。 这是我在flexbox中尝试几个输入的代码： form {margin：100px;} div.f
..
随着屏幕尺寸变化连续调整元素大小
有一种方法可以使用媒体查询随着屏幕大小的变化（连续/平滑）逐渐更改CSS属性的值。 像这个网站一样： http://www.bluegoji.com/ ？ 在
顶部的 标记的边距页面（导航栏）随着缩小浏览器窗口而连续减小。 这是我想要达到的行为。 解决方案 您正在查找的不是媒体查询。 可以按百分比设置宽度，边距和填充。这是正常的做法。 这是一个例子：
..
当容器设置为包装时，控制每个flex-line上的项目数
我使用css flexbox在容器中分配多个项目。我有一个像这样的flex容器： .container { display：flex; flex-flow：row wrap; align-content：center; justify-content：center; align-items：center; } 当我添加一定数量的固定宽度/按预期放置：如
..
嵌套Flexbox 100％高度在Safari中不工作
我刚刚接触Flexbox，我试图使用它创建一个具有固定标题，固定页脚和内容区域的布局，以填充页眉和页脚之间的可用空间。内容区域是具有3个面板（div）的可滚动区域，每个面板具有100％的高度。为了演示目的，我把每个面板顶部的 a，b，c （他们称为Panel a，Panel b和Panel c）文本。 在Firefox v39中，Panel a，b和c采用可滚动容器的完整高度。 .3）
..
在Flexbox中扩展iframe
我试图扩大 iframe 的大小，以填充我的网络应用程序中的剩余空间。我知道为 div （通过添加边框）分配的最大空间，但 iframe 高度本身是不会扩展到填充整个垂直高度。 问题是行内容 iframe 任何想法？ $ b $ b .box {display：flex; flex-flow：column; height：100vh;}。box .row.header {fle
..
CSS - 在html&机身显示：隐藏
*注意：根据 @aavrug 和
..