flexbox相关内容

如何在内联容器内创建一行等宽的元素?可能使用FlexBox

我正在尝试创建具有以下功能的一行元素: 在内联挡路容器内(该容器旁边需要有内容) 都是相同的宽度 自动调整大小,使其宽度足以容纳最宽的元素而不会溢出 自动调整大小以使仅包含最宽的元素而不会溢出 我目前的努力是使用FlexBox,但还不能满足所有这些条件。我的最新尝试(到目前为止在Chrome中测试)低于条件3,但不满足条件3。 我是不是遗漏了什么?或者是否有其他可行的方法? ..
发布时间:2022-02-22 12:44:37 前端开发

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

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

移除多行弹性项目之间的空间(间隙)

我试图在一个具有设定高度的容器中将多个项目放在一起.如果没有剩余空间,项目将彼此相邻. 这就是想法: 我正在尝试使用 flexbox 来实现这一点,这是一个具有设定高度的容器,方向设置为 column 并且 flex-wrap 是 wrap: 问题是列之间存在很大的差距. 我尝试将 justify-content 和 align-items 都设置为 flex-start, ..
发布时间:2022-01-30 17:41:33 前端开发

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

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

如何在 Flexbox 中禁用等高列?

我试图在布局中对齐三个元素. 首先,我有一个用于反馈的 div,然后是一个搜索输入,然后是一个用于建议的 div 元素. 我希望第一个和最后一个元素的宽度为 20%,搜索输入的宽度为 60%.使用 Flexbox 我实现了我想要的. 但是有一个功能可以将所有 div 增长到最高元素.这意味着当搜索结果弹出时,反馈和建议元素的高度会随着搜索 div 的增加而增加,从而导致布局混乱. ..
发布时间:2022-01-30 17:15:19 前端开发

Chrome/Safari 未填充 flex 父级的 100% 高度

我想要一个具有特定高度的垂直菜单. 每个子元素的高度必须与父元素的高度一致,并且文本居中对齐. 孩子的数量是随机的,所以我必须使用动态值. Div .container 包含随机数量的子项 (.item),它们总是必须填充父项的高度.为了实现这一点,我使用了 flexbox. 为了使文本与中间对齐,我使用了 display: table-cell 技术.但是使用表格显示需要 ..
发布时间:2022-01-30 17:03:49 前端开发

嵌套弹性容器时正确使用弹性属性

我在正确使用 flexbox 时遇到问题,想了解一下嵌套父元素和子元素的工作原理. 我知道孩子继承了父母的 flex 属性,但是对于任何进一步的后代(例如“孙子"),这会恢复吗?flexbox 的正确用法是什么? 换句话说,对于 child 的 孩子,我是否也必须将 display: flex 应用于孩子?这会覆盖第一个孩子的父母的弹性属性吗? .parent-container ..
发布时间:2022-01-30 13:46:39 前端开发

如何保持两个并排的 div 元素高度相同?

我有两个并排的 div 元素.我希望它们的高度相同,并且如果其中一个调整大小时保持不变.如果一个增长是因为文本被放入其中,另一个应该增长以匹配高度.不过我想不出来这个.有什么想法吗? 解决方案 Flexbox 对于 flexbox,它是一个声明: .row {显示:弯曲;/* 孩子的身高相等 */}.col {弹 ..
发布时间:2022-01-30 13:46:33 前端开发

无法滚动到溢出容器的弹性项目的顶部

因此,在尝试使用 flexbox 制作有用的模式时,我发现了似乎是浏览器问题,我想知道是否有已知的修复或解决方法——或者关于如何解决它的想法. 我要解决的问题有两个方面.首先,使模态窗口垂直居中,这可以按预期工作.第二个是让模态窗口滚动——在外部滚动,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉菜单和其他可以扩展到模态边界之外的 UI 元素——例如自定义日期选择器等) 但 ..
发布时间:2022-01-30 13:32:16 前端开发