标签[flexbox] - 堆栈内存溢出

[英]Occupy the least possible but still reasonable space in responsive layout

我正在编写一个数量选择器按钮并希望它能够响应。也就是说，我希望减号和加号只包含图标所需的宽度，中间的输入是最大宽度。我想知道如何使用 scss 来解决这个问题。 HTML： SCSS： grid-template-columns: 45px auto 45px; 可以解决这个问题，但不是有效 ...

形象出flexbox

[英]Image goes out of flexbox

我有一张我想要放入 flexbox 的图像。卡片具有固定大小，我希望图像在不指定大小的情况下放入，但它只是忽略了 flexbox。 .card { border: 2px solid #072227; border-radius: 20px; display: flex; height: 30v ...

从底部开始生长 Flexbox 项

[英]Grow Flexbox items from the bottom

我不敢相信我会问这个，因为它一定很简单。但是我在 react-native 工作，我认为必须使用 flexbox，但我愿意接受建议。 *** 我知道 React Native 会使用视图而不是 Div，但这个问题实际上是关于 flexbox 的，我将无法为此使用网格。虽然我也很好奇如何在网格中 ...

FlexLayout - 过滤器和 ListView - 不工作

[英]FlexLayout - Filters and ListView - Not working

我想为我的页面做一个高分辨率的响应式设计，它将是：对于较低的分辨率，它将是：但是我有这个用于高分辨率（我们可以看到过滤器和列表视图之间的所有空间）：我有这个低分辨率（搜索栏已经消失，我的过滤器之间有很大的空间）：下面是我的代码：我不明白我做错了什么。提前致谢。 ...

如何将图像法师放在左上角

[英]How to put the image mage on the top left side

我在这里完全是新手，我想将 vault-tec 图像放在左侧与导航菜单对齐，这是 css 输入：我尝试了 flex 属性display ， align-item...它不起作用，我想知道我到底做错了什么。我附上一张图片以供参考。谢谢 ...

需要帮助使导航栏居中，文本周围有空格

[英]Need help to get navigation bar in center with text having space around

我是 HTM/CSS 的新手，正在尝试使用 flex 在 header 上创建一个导航栏，当 hover 时，它应该为从左下角到右下角的下划线设置动画。但我无法将它放在中心并在每个项目周围留出空间。 HTML 代码： CSS 代码：目前我得到这样的东西： | 关于体验工作爱好| 在此处输入图 ...

安排弹性项目

[英]Arrange Flex-Items

假设我有一个 Flex-Box #X，我想在其中安排 4 个 Flex-Items #Y1... #Y4，如下所示：对于小于 60em 的 output 介质，弹性项目应该这样定位：我知道我必须为 HTML 部分做什么，但是我必须为 css 部分做什么？ ...

如何将 inline-flex label 与其周围的文本垂直对齐？

[英]How do I align an inline-flex label vertically with the text surrounding it?

我有一个 label，它有display: inline-flex和 span。我想将 label 居中，以便其文本的中间与文本的 rest 正确对齐。未对齐 label 我怎么能这样做？我想这是一个常见的问题，因为带标签的文本相当普遍。我的代码使用顺风类。我试过设置周围文本的行高，但这 ...

Text Div + Responisve 旁边的图像 Div

[英]Image Div next to Text Div + Responisve

所以我正在尝试创建一个模板，其中一个 div 是图片，另一个是带背景的文本。现在我想让这个模板具有响应性，以便文本以特定 px 宽度位于图片下方。通过 stackoverflow，我看到无数帖子说你应该使用 flexbox。我试过了，但我不能完全正确。所以在桌面上它应该是这样的： https ...

是否可以在 flex 中多次重复一个 div？

[英]Is it possible to repeat one div several times in flex?

我正在尝试在房子上创建一些 windows，这所房子有 30 个 windows。我想知道是否可以只使用一个 div 并重复创建它？ ...

如果缺少某些 div，如何填充网格行？

[英]How to fill the grid row if some div is missing?

我正在使用 tailwindcss 和这个 html：回复：https://play.tailwindcss.com/L8McFjGBVC<div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300"&g ...

CSS：flexbox 按比例缩放其内容直到它们适合，而不会溢出的画廊？

[英]CSS: flexbox gallery that proportionally scales its contents until they fit, without overflowing?

我正在尝试制作一个 16:9 图像的画廊，这些图像限制其容器的宽度和高度。它们应该自动包装成最适合缩放它们的行或列。我知道如何通过 JS 执行此操作，但如果可能的话，我宁愿选择 CSS 解决方案。 /* vvv For demonstration purposes vvv */ body { ...

Flex div 作为 img-bacground 不适合受另一个子 div 影响的最大父 div

[英]Flex div as img-bacground doesn't fit max parent div influeced by another child div

我的最终布局应该如下： “img div”和“parent text div”的宽度分别固定为“parent div”的 30% 和 70%。父级的高度受父级文本 div 的高度影响，而这又取决于其子级中包含的文本量。现在的问题是“img div”无法填充“parent div”的所有可用 ...

我无法使用 Selenium 单击其 ID 的元素。当我检查元素时，圆角矩形内写有“flex”。任何解决方案？

[英]I'm unable to click on a element with it's ID using Selenium. There's "flex" written inside a rounded rectangle when I inspect element. Any solutions?

我正在尝试使用 selenium 单击一个元素并弹出一个日历。我认为“flex thingy”与此有关。我试图点击“旅行日期”按钮，使日历在这个网站上弹出： https://www.path2usa.com/travel-companion/ 这是我的代码driver.get("https:/ ...

如何在文本旁边放置一个图标并居中 header

[英]How to place an icon next to text and centering a header

我正在尝试将图标放置在图像中的文本左侧。现在出于某种原因，它位于文本之上。该图标位于带有文本的选项卡内，我希望图标针对每个选项卡进行更改。即使我改变边距，它们也不会移动。 Senconly，我在 header 中有一个图像和文本，它在谷歌浏览器中看起来不错，但是当我更改浏览器时，它们会堆积 ...

如何使所有卡片大小相同并排成一行？

[英]How to make all cards same size and aligned in a row?

如何使所有卡片大小相同并排成一行？我尝试使用不同的样式，但卡片看起来很乱。我不知道我需要在 my.css 代码中更改什么。我希望它看起来与页面和其他卡片对齐 ...

CSS 调整大小时溢出

[英]CSS overflow on resize

我用 CSS 制作了一张简单的卡片。我试图让它响应，但是当我使用 DevTools 调整尺寸时，卡片溢出整个页面。我知道溢出属性会阻止这种情况，但我认为存在更好的设计方法。问题：这是卡片的标准外观这是我调整大小时卡片的外观：我怎样才能防止这种情况发生？或者至少让它们看起来不错？ HTM ...

尝试旋转一张 css 的卡片，同时将其保持在网格内？

[英]Trying to rotate a css card while keeping it inside a grid?

我正在尝试修改一个 javascript 文件，该文件将数据准备到参考卡中，然后打印出来。默认情况下，该脚本使用适合一张纸上 9 张卡片网格的较小卡片。我正在尝试修改脚本以改为使用更大的卡片，第三张卡片横向放置以适合每页三张卡片。每个打印页的所需格式我过去对 javascript、css 或 ...

Flex 与最后一行的间隙填充空间

[英]Flex with gap fill space in last row

当我使用带间隙的 flex 时，最后一行的末尾有一些空间（我认为大小与间隙相等）： https://jsfiddle.net/Lgnzj4ya/ 为什么最后一行不像第一行那样占用所有空间？如果我消除差距，它会这样做，但我想要项目之间的差距。我的理解是align-items: stretch （默 ...

我要怎么做这个 CSS

[英]How am I going to make this CSS

我要怎么把这个变成这个我尝试使用justify-content: space between; 并将块分开，但我如何将 3 和 4 对齐到容器底部 CSS 代码 ...