具有固定页眉、页脚和可滚动内容的响应式网格布局
我正在尝试使用 flexbox 创建 2 列全高设计.当我将滚动添加到整个中间部分时，我有一个奇怪的行为.如果父容器有滚动条，flex-grow/stretch 似乎不会增长/拉伸其他项目. 这是我的小提琴.下面还给出了代码: html, body {高度:100%；}#容器 {显示:弹性；弹性方向:列；高度:100%；宽度:50%；背景颜色:红色；}#容器头{背景颜色:灰色；}#容器
..
flexbox相关内容
对齐两个 flex 项目:一个到顶部，另一个居中
如何实现这一目标? #top 必须始终位于顶部并填充包装器的 100% 宽度. #center 必须放置在中心 - 垂直和水平. #wrap {显示:弹性；弹性方向:列；背景:#D8D8D8；高度:400px；对齐内容:居中；}#最佳 {背景:#F5A623；宽度:100%；}#中央 {背景:#4A90E2；对齐自我:居中；} 编辑:我只找到了以 div 为中心的解决方案.但我不知
..
忽略 nowrap 的 Firefox 文本溢出(Chrome 有效)
我在此处 创建了一个 JSFiddle 问题 这适用于 Firefox v33 和 v33.1，但在 34-35 中失败.这在 Chrome 和 IE11 中正常工作.这可能是 Firefox 中的一个错误，但我不确定.基本上我的 HTML 如下所示: .container {位置:绝对；宽度:150px；}.innercontainer {位置:相对；右填充:25px；底边距:10px
..
<按钮>中的文本和图像在 Firefox 中使用 flexbox 不会停留在同一行
我想显示一个带有图片和文字的按钮.文本和图像必须居中并在同一行/行上. 在 Firefox 中，图像和文本总是在不同的行上.我该如何解决这个问题? 这就是我所拥有的: button {显示:inline-flex；弹性方向:行；flex-wrap: nowrap;对齐内容:居中；对齐内容:拉伸；对齐项目:居中；}按钮 img {订单:0；弹性:0 1 自动；对齐自我:自动；}按钮跨度
..
使用 Flexbox 在中心对齐一个项目，在右侧对齐其他项目
我想像下面的示例一样使用 flexbox 将一个项目居中对齐，其他项目在右侧对齐. +-------------------------+|||||||+----+ +----+|||||||+-------------------------+ 这是我在 plunker 上的代码(已更新解决方案): http://plnkr.co/edit/kYYIOIFQaEMHgvZCKMkf?p
..
使用 flex 和 border-box 等宽
我正在使用 box-sizing: border-box; 在 flexbox 中具有不同的 border 厚度.我希望 flexbox 中的元素具有相等的宽度，但它计算没有边框的元素的 width. 举个例子:我的容器的width是100px，所以每个元素应该是20px；但是它们是 19.2px (x4) 和 23.2px. .container {显示:弹性；弹性方向:行；对齐项目
..
Flex 对齐器适用于 Firefox/Edge，而不适用于 Chrome
我无法使用 Chrome 制作对齐器，但它可以在 Firefox 和 Edge 上使用. 我正在使用 flex CSS: body {最小高度:100%；显示:弹性；弹性方向:列；}包装{高度:100%；/* 弹性: 1;就足够了，但它在 IE 中看起来很糟糕 */弹性:1 0 自动；背景颜色:#3D9970；}.aligner {高度:100%；显示:弹性；对齐项目:居中；对齐内容:居中
..
无法在电子邮件中使用 CSS 顺序(弹性框)
我有一些 HTML 在 2 个网页中工作正常，但有一次，我获取了容器 div 的 innerhtml 并将其邮寄给用户. 相同的代码，即使全部包含在电子邮件代码中，也不会以相同的方式发挥作用.这是只适用于浏览器的东西吗? 以下是一些无法正常工作的示例代码:
..
我可以更改“justify-content"吗?值取决于 flex 容器中的元素数量?
我正在旧网站上制作图片库.除了常规的旧 HTML/jQuery 或 JS/CSS 之外，我不能使用任何其他东西.我知道使用 Bootstrap 或某些网格库会容易得多. 我正在用 flexbox 构建它.每行有四个图像，有多个行.当每一行都有四个图像时，它看起来很棒.当它有 2 个或 3 个时，因为我使用了 justify-content: space-between，它看起来很奇怪，因为图
..
在 Chrome 中具有 100% 高度溢出主体的 Div
我正在尝试按照此处和此处.在 firefox 和 IE 中，它按预期显示，但在 chrome 中却一团糟.div 正在脱离身体.这是 chrome 遵循规范对 T 恤的另一个副作用还是仍然是一个错误? 代码: html，正文{宽度:100%；高度:100%；边距:0；填充:0；}div {边框:1px纯黑色；box-sizing: 边框框；边距:0；填充:0；}.red-bo
..
如何在没有百分比的情况下调整弹性项目的大小?
我正在尝试创建一个基于 flexbox 的网格，内容为 2/3 宽度，侧边栏为剩余的 1/3. 我在每个列中使用了百分比宽度，不幸的是，这在导航和标题中给了我错误. 这是为什么?我怎样才能在不使用百分比的情况下做到这一点，以避免错误? CodePen 演示 @import url(https://fonts.googleapis.com/css?family=Open+Sa
..
如何在保持相同大小的同时允许 flex-items 增长?
Flexbox 是网页设计师所希望的最酷的工具之一.不幸的是，有时我应该做什么并不是很明显.例如，这个 plunk.我希望项目展开以填满该行，而不是一直展开到最后一行. 我的 CSS 包含以下重要内容: .recipe-picker recipe {-webkit-flex: 0 1 8em;弹性:0 1 8em；高度:12em；} 如果我将 0 更改为任何正数(对应于 flex-grow
..
Chrome 忽略列布局中的 flex-basis
我无法让 Chrome 在 flex-direction: column 布局中注意 flex: 1 1 25% 的 flex-basis 部分.它在 row 布局中工作正常. 下面的代码片段演示了这个问题:黄色、蓝色和粉红色条是 flex-basis 50px、25% 和 75%，显示在列和行的 flex 方向上. 如果您在 Firefox(或 IE11 或 Edge)中运行它，列和
..
图像弹性项目不会在弹性盒中缩小高度
我有一个包含 img 弹性项目的弹性容器. 我希望这个 img 忽略它的内在高度 (90px) 以便高度可以缩小以匹配同级的 flex item 高度(根据默认的 align-items:stretch样式). .container {边框:1px 实心；显示:弹性；}.物品 {边框:1px 实心；}.内容 {宽度:200px；高度:50px；背景颜色:hotPink；}
..
Internet Explorer 不会使用 flex-direction: 列扩展 flexbox
我正在尝试创建一个带有静态标题和正文的容器，该正文根据其内容扩展到最大高度.达到最大高度后，主体应滚动.我编写的代码在 Chrome/Firefox 中运行良好，但在 IE 中，容器无法正确扩展. div{边框:1px 实心#DDD；}.容器{最大高度:150px；显示:弹性；弹性方向:列；}.header{高度:40px；}.滚动{弹性:1；溢出:自动；}
..
在 flexbox 中使用“高度:100%"和“对齐项目:拉伸"
我有一个带有直接子项的 flexbox，该子项使用 align-items:stretch 声明. 在这个 flexbox 的直接子级中，我想要一个 div 容器，它也使用其父级的全高(通过设置 height: 100%). 但是，div 容器不会拉伸到其父容器的 100% 高度，除非我还在 flexbox 的直接子容器上设置了 height: 100%. 这是一种错误吗?我是否
..
在使用 flex-flow 的 flex 容器中，更喜欢收缩而不是增长:row wrap
显示具有以下规格的不同尺寸图像和比例的图库: 图像之间没有空格(边距). 尽可能尊重原始比例. 被链接包围的图片. 非 JS 解决方案. 图像可能会被裁剪一点. 便携式解决方案. 显示的图像集是随机的. 图像必须从左到右显示(防止使用列). 我使用以下 flexbox 解决方案实现了这一点: section {显示:弹性；flex-flow:行包装；对齐内容:居中；
..
“行跨度"使用 flexbox 的行为
鉴于此标记:
和 CSS: .foo {显示:弹性；flex-wrap: 包裹;}.一个 {弹性:无；宽度:50%；高度:100px；背景:绿色；}.b {弹性:无；宽度:50%；高度:200px；背景:蓝色；}.C {弹性:无；宽度:50%；高度:100px；背
..
文本溢出:省略号在嵌套的 flex 容器中不起作用
我有一个由按钮旁边的文本组成的组件.如果没有足够的可用空间，文本必须缩小并被截断.像这样: .container .box {背景颜色:#efefef；填充:5px；边框:1px 实心 #666666;弹性:0 0 自动；}.container .text {弹性:1 1 自动；空白:nowrap；溢出:隐藏；文本溢出:省略号；}.容器 {显示:弹性；}
..
如何使用flex水平显示hr?
使用 flexbox 进行样式设置时，如果父容器设置为 display: flex 将导致 垂直显示而不是水平显示. .container {显示:弹性；弹性:1；}
测试
解决方案 使用 flex-grow: 1 或 width: 100% 使其增长以匹配宽度父母的.如果您打算在 .container.container 上的 flex-wr
..