flexbox 相关问题

CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。

如何在表单中制作2个不同的排序列？

我收到了一份包含 2 类复选框的表格。我想将第一个类别与 7 个 div 一起放置，并留下复选框我想要第二个类别有 3 个 div，并且复选框输入正确。我已经...

css sorting flexbox grid

回答 1 投票 0

适合编程初学者的响应能力

我是一个巴西人，刚刚开始编程只是为了好玩，我正在通过在线查找内容并向 ChatGPT 寻求帮助来开发一个独立项目。目前，我需要实施

html css web flexbox responsive

回答 1 投票 0

为什么 height: 100% 在使用 flex-grow 的父级下不起作用

我是网络编码新手，在使用 Flexbox 时遇到了奇怪的行为。当父元素使用 flex-grow: 1 时，子元素 height: 100% 不起作用。我看到了几种解决方案，但不起作用...

html css flexbox

回答 1 投票 0

Flexbox 调整内容，但不包含第一项

简单地说，有没有办法证明弹性盒的内容合理，但从中排除第一项？最简单的方法是将项目从弹性盒中取出，但我只是想知道是否可以

css flexbox

回答 1 投票 0

Bootstrap：反转列使它们堆叠

我试图让“第二”和“第三”列彼此相邻，同时还反转 MD 断点的顺序我试图让“第二”和“第三”列彼此相邻，同时还反转它们的 MD 断点顺序 <body> <div class="row flex-md-column-reverse"> <aside class="col-6"> <div class="border-top"> <h1>Third</h1> </div> </aside> <div class="col-6"><h1>Second</h1></div> <section class="col-12"> <h1>First</h1> </section> </div> </body> 我应用了flex-md-column-reverse，但它使它们彼此堆叠你可以玩玩order: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <aside class="col-6 order-md-3"> <div class="border-top"> <h1>Third</h1> </div> </aside> <div class="col-6 order-md-2"><h1>Second</h1></div> <section class="col-12"> <h1>First</h1> </section> </div>

html css twitter-bootstrap flexbox

回答 1 投票 0

如何使用 flex 让一个 div 向左对齐跨越所有高度，两个 div 在背景 div 内向右对齐顶部和底部？

所以我有 4 个 div，其中一个是充当“背景”div 的父级，以及该 div 内的其他 3 个 div。我想将较大的一个向左对齐并使其跨越整个高度...

css twitter-bootstrap flexbox

回答 1 投票 0

如何让我的 Bootstrap 网格填充页面的剩余高度而不超出它？

所以我有一个 Bootstrap 标头，这是他们示例中的标头之一。在其下方，我有一个包含 3 列的网格容器。我希望该网格填充 h 之后剩余的页面高度...

css twitter-bootstrap flexbox

回答 1 投票 0

如何使 Flexbox 容器自动调整宽度并居中且按钮彼此相邻对齐？

我使用以下代码，但容器仍然是全宽我希望它能够适应其内容的宽度 .cta-primary { 显示：柔性；调整内容：居中；对齐项目：...

html css twitter-bootstrap flexbox width

回答 1 投票 0

如何将导航内容居中并确保背景在大屏幕上拉伸全宽？

我正在尝试针对大屏幕优化网站的导航栏，但我面临两个问题：当屏幕宽度超过800px时，导航栏内的内容不居中。

html css flexbox responsive-design navigation

回答 1 投票 0

如何将叠加图像与主圆形同步？

我正在尝试复制日食的外观。我有一个启动屏幕，显示一个，其边框半径为 50%，宽度/高度为 20vw。这实现了课程的圆形外观... 我正在尝试复制日食的外观。我有一个启动屏幕，显示一个，其边框半径为 50%，宽度/高度为 20vw。当然，这实现了圆形外观，并且通过一些盒阴影我几乎实现了a外观。但是我想通过某种混合模式的叠加来增强美感（我已经修改了颜色闪避和强光，所以我会以某种方式同时完成这两个）但我现在遇到了麻烦，因为我无法将日食叠加完美地围绕在我的圆圈周围。我担心，具体到小数点后，我的设计将会中断，因为我使用的单位使其具有响应能力，但我不知道在同步叠加层时我还能如何尝试保持当前布局与我的形状。我觉得一定有更好的方法。我是堆栈溢出的新手，所以如果我的格式不好，我很抱歉。我已将我正在使用的覆盖图像附加到这个问题以及我正在尝试复制的图像参考覆盖图像（以防之前的链接不起作用）： https://imgur.com/a/jYMDkaR .startup-screen { position: absolute; z-index: 99; display: flex; overflow: hidden; align-items: center; flex-direction: column; justify-content: center; width: 100vw; height: 100vh; background: black; } .startup-screen__eclipse { display: flex; align-items: center; justify-content: center; width: 20%; height: 40%; padding: 5%; box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .startup-screen__eclipse__overlay { position: absolute; width: fit-content; height: fit-content; border: 2px solid red; top: 13%; left: 33%; /* mix-blend-mode: color-dodge; */ } .startup-screen__eclipse__overlay img { width: 35vw; height: 35vw; mix-blend-mode: hard-light; } <div class="startup-screen" id="startupScreen"> <div class="startup-screen__eclipse"> <div class="startup-screen__eclipse__overlay"> <img src="https://i.sstatic.net/6OwwlZBM.png"> </div> </div> </div> 背景和红框是一样的我使用了大众单位的垂直和水平比率来使它们正确。更准确地说，用 JS 设置所需的百分比可能会更好。剩下的你可以自己调整吧？ .startup-screen { position: absolute; z-index: 99; display: flex; overflow: hidden; align-items: center; flex-direction: column; justify-content: center; width: 100vw; height: 100vh; background: black; } .startup-screen__eclipse { display: flex; align-items: center; justify-content: center; width: 20vw; height: 20vw; padding: 5%; box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; position: relative; } .startup-screen__eclipse__overlay { position: absolute; width: 100%; height: 100%; border: 2px solid red; /* mix-blend-mode: color-dodge; */ } .startup-screen__eclipse__overlay img { width: 100%; height: 100%; mix-blend-mode: hard-light; } <div class="startup-screen" id="startupScreen"> <div class="startup-screen__eclipse"> <div class="startup-screen__eclipse__overlay"> <img src="https://i.sstatic.net/6OwwlZBM.png"> </div> </div> </div>

css flexbox

回答 1 投票 0

如果文本在一个div中，如何将分隔在多个div中的文本换行？

这是一些文字。这是一些文字。这是... <div style="width: 200px; background-color: lightblue"> <div style="display:flex " > <div>This is some text.</div><div>This is some text. This is some text.</div> </div> </div> <div style="width: 200px; background-color: lightyellow"> <div style="display:flex " > <div>This is some text. This is some text. This is some text.</div> </div> 我正在寻找一种方法来设置浅蓝色 div 中的 div 样式，以便文本看起来像浅黄色 div 中的文本。 <div style="width: 200px; background-color: lightblue"> <div> <div style="display:inline ">This is some text.</div><div style="display:inline ">This is some text. This is some text.</div> </div> </div> @temani-afif 提出的解决方案，有效！

html css flexbox

回答 1 投票 0

在弹性项目上使用边距

我的印象是可以为弹性项目/子项添加边距，并且 Flexbox 应该自动考虑到这一点并计算项目之间的正确间距。我不能...

css flexbox

回答 5 投票 0

无法滚动到内容容器 tailwindcss 中的最后一个元素

我想创建一个应用程序布局，其中有一个顶部工具栏，其中有一些 div，然后是侧边栏和带有顶部导航的内容窗口我的结构几乎可以工作，但我不能......

css flexbox tailwind-css

回答 2 投票 0

布局问题。只需要用css即可完成，无需js

我的卡片布局有问题。我需要左侧的卡片始终为全高，直到底部卡片宽度到达左侧的卡片。然后左边的高度c...