flexbox 相关问题

我想要以相等的间距和不同的父项对齐项目，并且不向这些项目添加任何宽度。我尝试了下面的代码但不起作用。请帮我解决这个问题。我希望将项目以相等的间距和不同的父级对齐，并且不为这些项目添加任何宽度。我尝试了下面的代码但不起作用。请帮我解决这个问题。 <div class="container"> <div class="buttons"> <button>test</button> <button>test</button> <button>test</button> <button>test</button> </div> <button class="outer">test</button> </div> .container{ display:flex; width:100% } .buttons{ display: flex; width: 75%; justify-content: space-between; } .outer{ margin-left:auto } 我的代码链接https://jsfiddle.net/f74ayxh9/ 我想要这样的结果，具有相等的间距和边距，但具有我的 HTML 结构。谢谢你您可以使用按钮容器元素上的 display: contents 来完成此操作。 .container { display: flex; justify-content: space-between; outline: 1px solid red; margin: 2em; } .buttons { display: contents; } <div class="container"> <div class="buttons"> <button> test </button> <button> test </button> <button> test </button> <button> test </button> </div> <button class="outer"> test </button> </div>

html css sass flexbox alignment

回答 1 投票 0

调整内容在左侧留出空隙

在底部，Git 按钮和链接“10 分钟阅读”和图像位于相同的位置（前两个在其中，第三个是其自身）。当我尝试证明内容合理时，差距就产生了......

html css flexbox

回答 2 投票 0

Flex-grid 渲染的差异

任何人都可以解释一下，为什么第一个示例向下滚动时速度更快比第二个？似乎第二个示例在我向下滚动时重新渲染行。只有当你

javascript html css flexbox

回答 1 投票 0

即使总高度为 100% 也会显示垂直滚动条

我有简单的 HTML/CSS 代码，有 3 个 div ，页眉、内容和页脚。页眉和页脚具有固定高度（170px），内容预计占用剩余的垂直空间。所有三个都已放置

html css flexbox overflow

回答 1 投票 0

具有固定页眉和页脚以及可滚动内容的 Flexbox

我正在尝试进行弹性盒设计。我不是 HTML/CSS 专家。我有一个弹性盒设计，带有固定的页眉页脚和占据页面上其余可用空间的内容。

html css flexbox

回答 2 投票 0

如何在使用宽高比时使内容适合可见页面？

我的页面上有一个组件（在示例中名为网格）。我希望这个组件能够实现以下限制： -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...

html css flexbox aspect-ratio

回答 1 投票 0

HTML/CSS - 如何在使用宽高比时使内容适合可见页面？

我的页面上有一个组件（在示例中名为网格）。我希望这个组件能够实现以下限制： -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...

html css flexbox aspect-ratio

回答 1 投票 0

如何使 Flex 容器中的并排 div 在包装自身之前先包装其内容

我有一个包含两个项目的 Flex 容器：一个图像，以及一个包含文本和搜索框的 div。如果窗口足够宽，我希望文本 div 出现在图像的右侧，环绕...

html css flexbox

回答 1 投票 0

handsontable 的初始宽度在 Flexbox 中设置得不好

我有一个装在灵活盒子里的手动桌子。 https://jsbin.com/rikufelosi/1/edit?html,输出这种行为很奇怪：至少在Mac下的Chrome或Safari中，加载页面后，

css scroll flexbox width handsontable

回答 3 投票 0

如何在CSS中将文本和图像与底部元素垂直对齐？

我正在开发一个布局，左侧有一些文本，右侧有一个图像。在它们下面，我有三个较小的图像。我想对齐左侧文本和右侧图像，以便...

html css layout flexbox

回答 2 投票 0

空间均匀在我的弹性框菜单中不起作用

我正在努力让我的菜单均匀分布。它似乎被卡在中间，而没有扩展到两侧的自由空间。我正在努力让我的菜单均匀分布。它似乎被卡在中间，而没有扩展到两侧的自由空间。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testing</title> <style> .navMenu{ display: flex; flex-direction: row; justify-content: space-evenly; padding: 7px; background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black); } .navMenu ul{ list-style: none; background-color: blue; margin: 0; padding-left: 2%; } ul li{ display: inline-block; position: relative; } ul li a{ display: block; padding: 4px 1dvw; color: white; text-decoration: none; font-size: 1.1em; } ul li ul.dropdown li{ display: block; padding: 8px; } ul li ul.dropdown{ position: absolute; z-index: 999; display:none; } ul li a:hover{ box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5); } ul li:hover ul.dropdown{ display: flex; flex-direction: column; padding: 0; } </style> </head> <body> <nav class="navMenu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Teams</a> <ul class="dropdown"> <li><a href="#">Cubs</a></li> <li><a href="#">Braves</a></li> </ul> </li> <li><a href="#">Coaches</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Contact</a></li> </nav> </body> </html> 我尝试过均匀间隔、周围间隔、间隔间隔等。没有任何效果像我想象的那样。它说我需要添加更多详细信息才能发布此问题。我不知道还能说什么。复制代码并尝试一下，您就会明白我的意思。我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？我想不通。 AI先生这样就够了吗？您遇到的问题是因为容器“.navMenu”内的“ul”具有背景颜色和填充，因此 Flexbox 没有按照应有的方式布局项目。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testing</title> <style> .navMenu{ display: flex; flex-direction: row; justify-content: space-evenly; padding: 7px; background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black); } .navMenu ul{ list-style: none; margin: 0; padding: 0; display: flex; flex: 1; } ul li{ display: inline-block; position: relative; flex: 1; } ul li a{ display: block; padding: 4px 1vw; color: white; text-decoration: none; font-size: 1.1em; text-align: center; } ul li ul.dropdown li{ display: block; padding: 8px; } ul li ul.dropdown{ position: absolute; z-index: 999; display:none; } ul li a:hover{ box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5); } ul li:hover ul.dropdown{ display: flex; flex-direction: column; padding: 0; } </style> </head> <body> <nav class="navMenu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Teams</a> <ul class="dropdown"> <li><a href="#">Cubs</a></li> <li><a href="#">Braves</a></li> </ul> </li> <li><a href="#">Coaches</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>

css flexbox

回答 1 投票 0

盒子设计 - 调整高度时重叠

我是一个完全的初学者，没有 html 或 css 的先验知识。话虽这么说，我已经成功创建了一个令我满意的简单网站。直到我需要包含较小视图的尺寸......

css flexbox media-queries css-grid

回答 1 投票 0

如何使用卡片制作响应式 CSS 布局，使卡片的顶部和底部部分与行中最高的部分保持相同的高度

我有一个布局，我想在其中显示多个“卡片”。每张卡片由垂直排列的 3 个部分组成。顶部部分将包含不同长度的文本

css layout flexbox css-grid

回答 1 投票 0

我的弹性盒未正确对齐/重叠

我正在开发一个基本网站的一部分，该部分需要左侧有图像和文本，右侧需要其他较小的框。左侧应该占据可用屏幕的 60% 并且......