flexbox相关内容

当外部 div 的大小发生变化时,可滚动的 div 会粘在底部

这是一个示例聊天应用程序 -> 这里的想法是让 .messages-container 尽可能多地占据屏幕.在 .messages-container 中,.scroll 保存消息列表,如果有更多消息,则滚动屏幕大小. 现在,考虑这个案例: 用户滚动到对话底部 .text-input,动态变大 现在,用户不再滚动到对话底部,而是文本输入增加,他们不再看到底部. 一种 ..
发布时间:2021-12-02 10:01:08 前端开发

当侧边项目具有不同的宽度时,保持中间项目居中

想象以下布局,其中点代表框之间的空间: [左框]……[中框]……[右框] 当我移除右边的框时,我喜欢中心框仍然在中心,就像这样: [左框]……[中心框]………… 如果我删除左框也是如此. ................[中心框]................. 现在,当中心框内的内容变长时,它会根据需要占用尽可能多的可用空间,同时保持居中.左右框永远不会缩小,因此当没有空格时 ov ..
发布时间:2021-12-01 16:57:15 前端开发

使用 flexbox 将元素与底部对齐

我有一个 div 和一些孩子: 标题1 标题2 一些或多或少的文字 点击我 我想要以下布局: -------------------|标题 1 ||标题 2 ||段落文本 ||可以有很多||行 ||||||||链接按钮|------------------- 无论 p 中有多少文本 ..
发布时间:2021-12-01 16:56:59 前端开发

flex-grow 没有按预期调整弹性项目的大小

似乎 flex div 中的内容会影响其关于 flex-grow 属性的计算大小.难道我做错了什么? 在下面提供的小提琴中,您会看到一个数字键盘.除底行外,所有行都包含 3 个数字.该行的 '0' 应该是 2 个数字的宽度,因此 flex-grow: 2 和 ':'(冒号)是 1 个数字的大小,因此 flex-grow:1. 我在这里遗漏了什么吗? “0"的右侧应该与其上方的 8 ..
发布时间:2021-12-01 16:54:10 前端开发

根据原始大小制作 flex-grow 展开项目

我有 3 个按钮,它们的宽度各不相同.我希望它们都获得相同的宽度以填充行的剩余宽度,因此最宽的仍然会比其他的更宽等. 您可以在下面看到我尝试用 flex 做的事情导致所有按钮的宽度相同.我知道 flex-grow 可用于按比例增长每个项目,但我不知道如何让它们都相对于原始大小增长. 您可以在第二行看到蓝色项目比其他两个大.我只希望所有三个都从当前大小平均扩展以填充该行. 谢谢 ..
发布时间:2021-12-01 16:53:41 前端开发

弹性容器内的居中元素正在增长并溢出顶部

我肯定忘记了垂直和水平居中的 flexbox 的一些基本知识. 容器在具有垂直滚动的父级内,当容器变得太高时,它会超出父级顶部,剪裁内容.底部保持不变. 尝试调整视图的高度或添加更多线条以查看其实际效果. body,html {高度:100%;宽度:100%;边距:0;}* {box-sizing: 边框框;}#包装{背景:灰色;高度:100%;宽度:100%;最大高度:100% ..
发布时间:2021-12-01 16:52:00 前端开发

弹性项目的等高子项

我在创建 flexbox 响应式网格时遇到问题,希望有人能指出我正确的方向. 我希望所有 .block div 的高度相等,并且 .bottom div 绝对位于底部.这实际上在当前解决方案中有效,但是当 h2 标题太长并达到 2 行时,我想要所有 h2 标题行高度相同. 这在某种程度上可能吗? 我做了一个 Codepen 来说明这个问题:http://codepen.io/ke ..
发布时间:2021-12-01 16:51:44 前端开发

CSS 网格布局中的等高行

我认为使用 Flexbox 无法实现这一点,因为每一行只能是适合其元素所需的最小高度,但是使用较新的 CSS Grid 可以实现这一点吗? 明确地说,我希望网格中所有行的所有元素的高度相等,而不仅仅是每一行.基本上,最高的“单元格"应该决定所有单元格的高度,而不仅仅是其行中的单元格. 解决方案 简答 如果目标是创建一个行高相等的网格,其中网格中最高的单元格设置所有行的高度,这里 ..
发布时间:2021-12-01 16:50:55 前端开发

即使在包装后也具有等宽的 flex 项目

是否可以像这样制作纯 CSS 解决方案: 项目有一些min-width. 它们应该动态增长以填充所有容器宽度,然后换行到新行 列表中的所有项目都应该具有相同的宽度. 这是现在的样子: 这就是我想要的样子(我手动管理了那些底部项目的宽度只是为了显示预期的结果): .container {显示:弹性;flex-wrap: 包裹;}.物品 {背景:黄色;最小宽度:100px; ..
发布时间:2021-12-01 16:47:41 前端开发

弹性容器中的等高行

如您所见,第一个 row 中的 list-items 具有相同的 height.但是第二个row 中的项目有不同的heights.我希望所有项目都具有统一的 height. 有没有办法在不提供固定高度而只使用flexbox的情况下实现这一目标? 这是我的代码 .list {显示:弹性;flex-wrap: 包裹;最大宽度:500px;}.项目清单 {背景颜色:#ccc;显示:弹性 ..
发布时间:2021-12-01 16:47:31 前端开发

绝对定位的弹性项目不会从 IE11 中的正常流程中删除

我们有两个带有内容的 div,第三个 div 是具有绝对位置的背景. 容器是一个弹性盒子. 在 Chrome 和 Safari 中一切正常,但 Firefox 和 IE11 会影响绝对定位的 div,并在 div 之间分配空间,就像连续 3 个 div 一样. 我已经制作了 jsfiddle 示例.有没有办法修复这个bug?https://jsfiddle.net/s18do03 ..
发布时间:2021-12-01 16:45:50 前端开发

设置 flexbox 项目之间距离的更好方法

要设置 flexbox 项目之间的最小距离,我在 .item 和 margin: 0 -5px 上使用 margin: 0 5px容器.对我来说,这似乎是一种黑客行为,但我找不到更好的方法来做到这一点. 示例 #box {显示:弹性;宽度:100px;边距:0 -5px;}.物品 {背景:灰色;宽度:50px;高度:50px;边距:0 5px;} ..
发布时间:2021-12-01 16:39:16 前端开发

弹性容器中的文本不会在 IE11 中换行

考虑以下片段: .parent {显示:弹性;弹性方向:列;宽度:400px;边框:1px纯红色;对齐项目:居中;}.孩子 {边框:1px纯蓝色;} Lorem Ipsum 简直就是印刷排版行业的假文字 Lorem Ipsum 简直就是印刷排版行业的假文字 在 Chrome 中,文本按预期换行: 但是,在 ..
发布时间:2021-12-01 16:32:18 前端开发

Flex-box:将最后一行与网格对齐

我有一个简单的 flex-box 布局,其中包含一个容器,例如: .grid {显示:弹性;flex-flow:行包装;对齐内容:间隔;} 现在我希望最后一行中的项目与另一行对齐.应该使用 justify-content: space-between; 因为可以调整网格的宽度和高度. 目前看起来像 在这里,我希望右下角的项目位于“中间列"中.实现这一目标的最简单方法是什么?这是一个 ..
发布时间:2021-12-01 16:22:51 前端开发

左、中、右对齐 3 个不相等的块

我正在尝试对齐由 3 个内容块组成的顶部菜单. 我想要实现的是: 块 1:左对齐 块 2:水平居中 块 3:右对齐 如果所有 3 个块的大小相同,我可以使用 flexbox(如代码段中所示),但它们不是,所以它不会产生我需要的输出. 相反,flexbox 在 3 个块之间放置了相等的空间 - 导致中间块偏离中心对齐. 我想知道这是否可以通过 flexbox 来实现 ..
发布时间:2021-12-01 16:16:43 前端开发

flex-wrap 如何与 align-self、align-items 和 align-content 配合使用?

align-self 在以下代码中,align-self 与 flex-wrap: nowrap 一起使用. flex-container {显示:弹性;flex-wrap: nowrap;对齐内容:flex-start;宽度:250px;高度:250px;背景颜色:银色;}弹性项目{弹性:0 0 50px;高度:50px;边距:5px;背景颜色:浅绿色;}弹性项目:最后一个孩子{al ..
发布时间:2021-12-01 16:11:25 前端开发

使用 display:flex 用 CSS 填充剩余的垂直空间

在 3 行布局中: 顶行应根据其内容调整大小 底行应该有一个固定的像素高度 中间一行应该展开以填满容器 问题是随着主要内容的扩展,它会挤压页眉和页脚行: HTML: 标题:根据内容调整大小 (但真的是这样吗?) 主要内容:填充剩余空间 x x x x x x x x x x x x x x x x x x ..
发布时间:2021-12-01 16:02:43 前端开发

flex-basis 和 width 有什么区别?

已经有关于此的问题和文章,但据我所知,没有定论.我能找到的最好的总结是 flex-basis 允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值. ...这本身并没有说明带有 flex-basis 集的元素的行为.以我目前对 flexbox 的了解,我不明白为什么这不能描述 width. 我想知道 flex-basis 与 width 在实践中究竟有何不 ..
发布时间:2021-12-01 16:01:32 前端开发

为什么 flex 项目受限于父尺寸?

考虑以下示例... body {边距:0;}* {box-sizing: 边框框;}.父母{最小高度:100vh;宽度:50vw;边距:0 自动;边框:1px纯红色;显示:弹性;对齐项目:居中;对齐内容:居中;}.孩子 {边框:1px纯蓝色;宽度:150%;} Lorem ipsum dolor sat amet, consectetur ad ..
发布时间:2021-12-01 16:00:28 前端开发

使 div 跨越网格中的两行

我有一个充满块的页面,这些块堆满了 display: inline-block.我想放大四到两倍,所以我使用 float: left 或 right 来放置其他块. 我的问题是,如果我有一个五元素行,我怎么能在它的中间放置一个更大的元素?(因为float 把它自然地放在一边). 这是一个示例片段: #wrapper{宽度:516px;}.堵塞{显示:内联块;宽度:90px;高度: ..
发布时间:2021-12-01 15:57:50 前端开发