新标题：我的观点是：当使用flexbox时，粘性元素的粘性特性不会被保留

我在这个问题上卡了一会儿，想分享一下这个position:sticky+flexbox的问题：我的粘性div在切换到flexbox容器视图后，突然在被包裹在flexbox父元素中时不再粘性。.flexbox-wrapper{display:flex;height:600px;}.regular{background-color:blue;}.sticky{position:-webkit-stic

P粉356128676 2023-08-21 23:28:29 0  2  592

Flexbox 对齐图像的问题和挑战

我最近一直在开发自己开发的主页，并且在弹性盒中对齐我的项目时遇到一些困难。第一个Flexbox应包含三(3)张图片，并且所有图片均应位于彼此下方的一条垂直线上。这对于我的第二个弹性盒也很重要。这是我的代码：.flexcontainer-1{display:flex;justify-content:flex-start;align-items:left;height:auto;width:auto;

P粉068510991 2024-02-26 00:26:26 0  2  516

标题重写为：使用Flexbox实现元素的水平和垂直居中

如何使用flexbox在容器中水平和垂直居中div。在下面的示例中，我希望每个数字都在下面（按行）居中。.flex-container{padding:0;margin:0;list-style:none;display:flex;align-items:center;justify-content:center;}row{width:100%;}.flex-item{background:tom

P粉748218846 2023-08-20 13:00:18 0  2  519

如何去除CSS FLEXBOX中图标周围的空白空间？

我是一个初学者，有人可以解释一下，当我使用flexbox时，如何去掉我的图标周围的蓝色背景色？我无法将子元素的属性推广给它们的父元素。我的码我的结果我不想使用inline-flex。谢谢

P粉765570115 2023-08-10 14:11:39 0  1  522

使用 Flexbox 将元素左对齐和居中对齐

我正在使用Flexbox来对齐我的子元素。我想做的是将一个元素居中，并使另一个元素靠左对齐。通常我会使用margin-right:auto设置左侧元素。问题在于将中心元素推离中心。如果不使用绝对定位，这可能吗？HTML和CSS#parent{align-items:center;border:1pxsolidblack;display:flex;justify-content:center;mar

P粉545682500 2023-08-27 21:54:23 0  2  622

当 Flexbox 项目以列模式换行时，容器不会增加其宽度

我正在开发一个嵌套的Flexbox布局，其工作原理如下：最外层（ul#main）是一个水平列表，当添加更多项目时必须向右扩展。如果它变得太大，应该有一个水平滚动条。#main{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;/*...andmore...*/}此列表中的每个项目(ul#main > li)都有一

P粉924915787 2023-10-17 22:05:01 0  2  633

如何使用CSS让元素填充其容器？

我们怎样才能让margin元素填充本身不是Flexbox的Flexbox项目？一个元素（甚至是带有边距的嵌套元素）可以使用position:absolute轻松填充其容器——如果它不在Flexbox项目内。为什么这不适用于Flexbox项目内的元素？<main><nav>NAV</nav><section><div>DIV</div

P粉514458863 2024-02-21 16:48:39 0  2  477

Flexbox中的justify-content: space-between似乎无效

我尝试过使用类和ID来更改CSS中的许多内容，但似乎没有任何方法可以使两个图像都位于屏幕的远端（徽标位于最左侧，个人资料位于最右侧））。尝试了很多不同的东西，例如text-align和不同的justify-contents但似乎没有任何效果。这是代码：.top-nav{display:flex;position:absolute;background-color:blue;opacity:0.5;

P粉511749537 2024-03-21 23:06:10 0  1  577

我的 CSS 样式表不再起作用/链接到我的 HTML 文件 - 可能是什么原因？

我已经在很多论坛上搜索了答案，并且查看了大约50个google链接，但还没有发现任何有效的方法...我的CSS没有显示在我的HTML上。我的代码工作得很好，直到我在其中添加了一个Flexbox容器和2个Flexbox。我总是测试我的代码，这样我就知道Flexbox可以在这个特定的HTML文件之外工作。此外，我注意到我的CSS未在localhost/#my_file#上的“检查元素”上更新。这种情况

P粉473363527 2024-04-03 09:49:45 0  1  631

Google Chrome 使用 Flexbox 视口锚定扩展方向

GoogleChrome中存在一个问题，当元素放置在具有之间有空格或center对齐内容。这在Firefox、IE11、Edge或Safari中不是问题，因为元素始终向下扩展。我很好奇：Chrome的行为是否遵循某些规范？如果有，是哪一个？如果不是，那为什么要在Chrome中这样做？（恕我直言，点击触发器在屏幕外随机消失是可怕的用户体验。）可以通过某种方式修改或禁用Chrome的行为吗？例如。通过

P粉852578075 2023-08-25 17:44:46 0  1  634

为什么我的 Flexbox CSS 无法正常运行？

为什么display:flex在我的CSS代码中不起作用？我想让我的HTML代码的这一部分位于页面的中心。body{margin:0;display:flexauto01;justify-content:center;height:100vh;}<formclass="form"id="form"></form><h4class

P粉805535434 2024-02-03 22:23:08 0  1  403

如何使用flexbox实现这种响应式布局

我正在制作一个React应用程序，它在Flex容器内呈现xy数量的卡片和单个小部件。所有卡片具有相同的宽度和高度，但小部件的高度等于卡片高度*2+row-gap。容器的宽度根据视口宽度而变化，并且在视觉上应分别看起来为带有卡片的2或3列。为了进一步清晰起见，我提供了所需布局的模型图像，小部件用蓝色表示。无论我尝试什么，如果不将行的高度更改为其大小，我都无法让小部件显示在正确的位置，从而留下一个“空

P粉733166744 2024-02-26 19:29:01 0  2  469

收缩容器以适应包裹的子元素

我试图弄清楚flexbox如何工作（应该工作？...）对于如下情况：.holder{width:500px;background:lightgray;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:nowrap;}.v2{width:320px;}.child{display:inline-block;

P粉182218860 2023-10-21 10:33:50 0  2  649

Flexbox在子元素溢出时的行为有所不同

如果容器是flex并且item2有overflow，容器将渲染为期望的大小，并且溢出滚动条可见。.Flex_container{width:300px;height:100px;display:flex;flex-direction:column;}.item1{color:white;background-color:black;}.item2{color:white;background-co

P粉787934476 2023-09-11 15:25:10 0  1  531

如何将可折叠元素插入到 Flexbox 布局中

我有一个图像绕行的弹性盒布局，我想在单击图像时显示一些信息。该信息应显示在包含图像的行与其正下方的行之间，而不移动“列”。这就是我想要的效果类型：http://olmenta.altervista.org（当您单击一本书时）。这是我所做的：https://jsfiddle.net/fabhpnw9/3/varcoll=document.getElementsByClassName("re

P粉366946380 2024-03-19 23:20:59 0  2  449

使用flexbox来根据内容的宽度创建span的方法

我已经在宽度固定的flex-row父元素中使用了span和div.parent{display:flex;flex-direction:row;width:230px;background-color:blue;}.child1{background-color:red;}.child2{min-width:40px;}这是span中的一些文本我希望span始终与文本的宽度相同，而div则占据父元

P粉726234648 2023-08-15 12:26:13 0  1  531

Flexbox 设计：我希望文本气泡的各个侧面都接触

.fm-bubbles{显示：flex;flex-wrap:wrap;宽度:100%;高度:100px;}.fm-bubbles{flex:1110%;高度:最大内容;边框:1pxsolidroyalblue;边框半径:5px ;}<divclass="fm-content"><divclas

P粉002546490 2024-04-01 10:59:44 0  1  468

正确使用弹性属性的方法来嵌套弹性容器

我在正确使用flexbox时遇到了一些问题，想要对父元素和子元素的嵌套有一些澄清。我知道子元素会继承父元素的flex属性，但是对于进一步的后代元素（例如“孙子”）会发生什么呢？在这种情况下，flexbox的正确用法是什么？换句话说，我是否也需要将display:flex应用于子元素，以应用于子元素的子元素？这样会覆盖第一个子元素的父元素的flex属性吗？.parent-container{disp

P粉369196603 2023-08-24 11:43:49 0  1  489

居中一个具有100vh高度的背景图上的div

我正在学习一门课程，其中顶部有一个固定位置的导航栏。背景设置为100vh的高度，带有文本内容的div位于背景的中心。使用Flexbox它几乎居中，但为了真正使其到达背景中心，该div的高度必须设置为100%的高度。我对Flexbox和视口高度有所了解，但是我对为什么需要将div的高度设置为100%才能真正使潜水居中感到困惑。我想你可以在这里放置任何图像作为背景来复制我所要求的内容。希望我在这里说得

P粉006847750 2024-02-17 12:39:44 0  1  473

Flexbox项目在窗口过短时会溢出容器，同时侧边栏无法保持底部对齐

我正在尝试使用一个简单的弹性布局，其中包括一个标题、一个2x2的内容网格，然后是侧边栏。当窗口的宽度小于某个特定大小时，侧边栏应该移动到屏幕底部。目前，一旦达到该大小，如果将窗口的高度调得太小，网格内容将会重叠在标题上方，但我不知道为什么会这样。屏幕应该只是视图高度的大小，但侧边栏的移动会导致其扩展。@media(max-width:960px){.main-screen{height:100vh

P粉226642568 2024-03-31 00:03:58 0  1  556