flexbox相关内容

如何平等地设置弹性项目的高度

我有一个弹性盒容器和两个弹性盒项目:item-img 和 item-content.item-img 里面有一张图片.我希望 item-img 的高度等于 item-content 的高度，并且图像将覆盖它的所有空间. 这意味着item-img的高度是基于item-content的高度设置的.item-content 的高度不是固定的，可能比图片的高度大很多，也可以小很多. 任何帮助将 ..
发布时间：2021-12-31 13:21:55 前端开发

如何底部对齐弹性项目内的元素?

我有一个包含三个 flex 项目的 flex 容器，每个项目内部都有一个链接，该链接应该在底部对齐(所有链接底部中间对齐). Flex 项目被拉伸并且没有固定高度，与 flex 容器相同.谢谢！ .flex-container {显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-flex-direction: 行；-ms-flex-directi ..
发布时间：2021-12-31 13:21:45 前端开发

在这种情况下如何计算高度?

在此设置中: html,身体 {高度:100%；}.应用程序 {显示:弹性；}.菜单 {背景颜色:红色；宽度:100px；}.内容 {弹性:1；边框:1px纯蓝色；} menu 内容 内容 内容 内容 内容 ..
发布时间：2021-12-31 13:21:36 前端开发

CSS Flexbox 组 2 弹性项目

我正在尝试学习 Flexbox，但被我想要创建的布局困住了. 在移动设备上，我有以下布局: 是否可以在桌面上获得以下布局? 代码: .wrapper {显示:弹性；flex-flow:行包装；}.wrapper >* {填充:10px；弹性:1 100%；边框:1px 纯灰色；}@media all 和(最小宽度:600px){.wrapper >文章 {弹性:3 66%； ..
发布时间：2021-12-31 13:21:09 前端开发

伪元素未在左上角对齐

我正在使用 CSS counter 和 content 显示图块编号.我想在磁贴的左上角显示这些数字.以下代码在 Chrome 中正确显示，但在 FF 或 IE 11 中不正确(未在其他浏览器上检查). 我需要在 CSS 中进行哪些更改才能始终在左上角显示数字? Chrome:这就是我想要的: Firefox:数字左对齐......但不是顶部: .tiles {/* fle ..
发布时间：2021-12-31 13:21:01 前端开发

溢出属性在 IE 11 中不起作用

我下面的代码在大多数浏览器(Chrome、Firefox、Safari、Edge)中都可以正常工作，但在 IE11 中似乎不起作用. 我正在 caniuse 上阅读已知问题，但它似乎什么也没说关于 IE11 和 overflow.这是 IE 11 中的错误还是我遗漏了什么? .container {显示:弹性；最大高度:100px；弹性方向:列；边框:1px纯红色；}.header { ..
发布时间：2021-12-31 13:20:54 前端开发

使弹性项目包装到下一行，以下项目继续流动

我希望红色框位于第二行，但随后我希望在它之后定义的 div 继续在第一行，以便所有黑框基本上都环绕在黑框周围.这可以通过 flexbox 实现吗? 它应该是这样的: +---+---+---+---+---+|1 |2 |3 |5 |6 |+---+---+---+---+---+|4 |+---+---+---+---+---+|7 |8 |9 |10 |11 |+---+---+--- ..
发布时间：2021-12-31 13:20:45 前端开发

删除从 flex 容器复制的文本中的换行符

我有一个应用程序，其中有一行是 flex 容器，其中包含构成该行的多个文本跨度. 这会导致一个奇怪的场景，如果您复制该行，则会在每个跨度之间出现换行符.而如果您使用任何其他方式来布置线条，则可以将其全部放在 1 行中. 我在这里设置了一个代码笔作为例子.复制 2 行并将它们粘贴到文本编辑器(或此处的评论)中，然后查看第一行是如何变成单行而第二行是如何变成 3 行的. 有没有人来遇 ..
发布时间：2021-12-31 13:20:34 前端开发

Flex-box 100vh 在移动 safari chrome 后面延伸 - 是否有任何已知的技巧或解决方案

Flex-box 100vh 在移动 safari chrome 后面延伸 - 有任何已知的技巧或解决方案吗?- 或者是好得令人难以置信? 我经常想要一个“模态"类型的封面 div，或者一个用于简单的一键 UI 屏幕的全屏图像.我使用 flex-box 越多，我就越不能指望我的一些旧技术.当涉及到 100% 高度时，我通常会采用的方法是: html, body {高度:100%；} HT ..
发布时间：2021-12-31 13:20:24 前端开发

弹性列中的等高弹性项目

我正在尝试使列中的列表项在其列表中具有相同的高度. 这是我所拥有的: 列表项 1 列表项 2 列表项 3 奥尔{最小高度:100%；显示:弹性；弹性方向:列；}奥利{弹性:1；} 我尝试过:我尝试按照本教程进行操作:https://css-tricks.com/boxes-fill-height-dont-squish/ 无济于 ..
发布时间：2021-12-31 13:20:14 前端开发

在多行中管理 CSS flex-box 增长以创建相等块的网格

我正在寻找一种在使用 flex-growth: 1 的同时使用 flexbox 创建大小相等 盒子的方法.通过使用以下方式定义父级，这很有效: display: flex;弹性流:行包装； 及其子项: flex: 1 0 10rem; 但是，与前几行中的框相比，最后一行的框的宽度(取决于该行中的块数)将具有不同的宽度.有没有办法在仍然使用 flex-grow 的同时解决这个问题? H ..
发布时间：2021-12-31 13:20:08 前端开发

使用 Flexbox，让元素拉伸以填充行之间的间隙

我觉得这个问题有点傻，但我对 Flexbox 的知识有点用完了，所以我希望也许其他人可以进来帮助我. 我的总体目标是让中间行中的两个项目伸展以填充标题和项目之间的空间，我四处搜索，老实说无法弄清楚我应该做什么.我从 CSS Tricks Guide 分叉了代码，在最底部，我做了一些改动.我目前拥有的代码是(以全屏模式打开它以使其更清晰): body,html {高度:100%；}.包装 ..
发布时间：2021-12-31 13:19:57 前端开发

有没有办法将一个 flex/grid 子项(三个以上)和不同的宽度居中?

看看代码片段.有一条红线显示父级的中心.有没有办法水平居中中间块?CSS-grid 解决方案也适用. 我可以想象两种解决方案: 位置:绝对 用相同宽度的包装器包裹 2 个左块和 2 个右块 但我对其中任何一个都不满意. .wrapper {显示:弹性；对齐项目:居中；对齐内容:间隔；高度:100px；填充:5px；位置:相对；背景:青色；颜色:#fff;字体系列:无衬线； ..
发布时间：2021-12-31 13:19:49 前端开发

FlexBox 对齐(拉伸)最后一项

.Hi Folks 我正在尝试设置 Javascript 函数以对齐(拉伸)FlexBox 中的最后一个子项.要在行中显示最多三列，我在 .article-card-container 设置为 flex: 1 1 calc(100 * (1/3));. 要拉伸我需要在其上设置的最后一项 flex: 1; ..
发布时间：2021-12-31 13:19:43 前端开发

IE 弹性盒模型不起作用

我正在尝试在我的网站中实现灵活的框模型，虽然它适用于 -webkit 浏览器(如 chrome 和 safari)、其他浏览器(如 mozilla 和 opera)，但我似乎无法在 Internet Explorer 中使用它，不不管我做什么.这是我的 Css 样式表文件的一小段，其中包含我的 .holder 类，其中包含所有内容，以及我的 #new_div id，它是 .holder 的子项，并 ..
发布时间：2021-12-31 13:19:35 前端开发

制作一个与其同级列高度相同的弹性列

我有两个包含一些内容的 flex 列.我希望第一列的高度始终等于第二列的高度，如果它的内容比另一列多，则使用 overflow: auto.一个重要的注意事项是我不想使用绝对定位.以下是我所追求的: .cover {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；溢出-y:自动；}.content-1 {高度:500px；背景颜色:绿色；}.content-2 {高度:150p ..
发布时间：2021-12-31 13:19:30 前端开发