flexbox 相关问题

我在 Flexbox 容器中有多个项目，我已经实现了所需的布局行为（考虑到 .tool-body 可以动态隐藏/显示）。以下html：我在 Flexbox 容器中有多个项目，我已经实现了所需的布局行为（考虑到 .tool-body 可以动态隐藏/显示）。以下html： <div class="root"> <div class="toolbar">toolbar1</div> <div class="tool-body">body1</div> <div class="toolbar">toolbar2</div> <div class="tool-body">body2</div> <div class="toolbar">toolbar3</div> <div class="tool-body">body3</div> </div> 使用CSS： .root { display: flex; flex-direction: column; height: 100%; width: 100%; } .tool-body { flex: 1 1 100%; } 现在，出于应用程序逻辑的目的，我想用 <div> 包装这些项目，以便在应用程序的其他方面拥有更简单的逻辑，例如：键盘、鼠标事件（冒泡） $(".my-group").mousemove(...) //...enter/leave jQuery DOM 遍历用例 $(this).closest(".my-group")... //more chained calls 基于嵌套元素焦点的css .my-group:has(:focus) { /* background/border stuff*/ } 所以，我希望 html 看起来像这样： <div class="root"> <div class="my-group"> <div class="toolbar">toolbar1</div> <div class="tool-body">body1</div> </div> <div class="my-group"> <div class="toolbar">toolbar2</div> <div class="tool-body">body2</div> </div> <div class="my-group"> <div class="toolbar">toolbar3</div> <div class="tool-body">body3</div> </div> </div> ...加上额外的 css .my-group: .my-group { display: flex; flex-direction: column; flex: 1 0 auto; /* tried-out many combinations of grow/shrink/basis */ } 但是现在，布局行为不一样了，因为容器现在 .root 容器有 3 个项目，它们本身就是嵌套的 Flex 容器。我知道 Flex 通过容器工作，因为父元素有一些定义的方向，直接子元素是根据其 flex-(grow|shrink|basis) 进行布局计算的项目。我不确定是否有可能给出 html 结构，但该布局的行为就好像 <div class="my-group"> 根本不存在一样。正如我所说，这个额外的 div 包装是为了简化其他方面，如果我不能这样做，其他方面往往会变得非常复杂。这里是 JSFIDDLE，它并排演示了我的示例： https://jsfiddle.net/tqrn1z0s/4/ 鉴于：可能有 1 到 4 个这样的 .my-groups 布局行为应该是这样的当显示所有 .tool-body-es 时，垂直空间应为每个 .my-group 均匀分配当某些 .tool-body-es 被隐藏时，显示其相应的 .toolbar，其余垂直空间均匀分布在显示的其他空间中。问题：如何实现第二个 html 的布局行为以充当第一个 html。是否可以告诉浏览器以下内容：出于布局目的，假装<div class="my-group">不存在还有其他解决方法吗？要让浏览器忽略 .my-group，那么您可以在其上使用 display: contents（请参阅有关 css 技巧的解释）。它基本上使 .my-group 的孩子看起来就像是 .root 的孩子。使用它有一些注意事项（请参阅caniuse.com），但如果您超出了这些限制，那么您应该很好。 .root { display: flex; flex-direction: column; height: 100%; width: 100%; } .tool-body { flex: 1 1 100%; } .my-group { display: contents; } <div class="root"> <div class="my-group"> <div class="toolbar">toolbar1</div> <div class="tool-body">body1</div> </div> <div class="my-group"> <div class="toolbar">toolbar2</div> <div class="tool-body">body2</div> </div> <div class="my-group"> <div class="toolbar">toolbar3</div> <div class="tool-body">body3</div> </div> </div>

html css layout flexbox nested

回答 1 投票 0

当项目太多时如何解决内容溢出问题以及为什么媒体查询不起作用？

当我尝试媒体查询、Flex 和网格时，我遇到了两个问题。溢出问题我在堆栈溢出中搜索相关问题，但没有解决我的问题。当我做...

css flexbox media-queries overflow css-grid

回答 1 投票 0

grid css 2 列和第二列 2 行

我是网格CSS新手，我想实现这样的目标我坚持第一列，无法修复第二列的正确顺序这就是我所做的 .image-wrapper { 显示...

css sass flexbox grid

回答 1 投票 0

Flex 容器收缩到父级高度以下

我目前正在尝试 HTML 对话框，并且偶然发现了有关 Flex 容器约束的问题。我的 HTML 如下： ...

html css flexbox

回答 1 投票 0

Flexbox：如何将行的元素拉伸到全宽？

我有一个随机宽度图像的弹性网格：我想将每行的元素拉伸到全宽以消除空白 - 如何使用 CSS 实现这一点？证明内容不合理

css flexbox

回答 2 投票 0

有没有办法让弹性子项尊重最小高度，同时又允许它增长超过容器的高度？

身体{ 高度：100vh；保证金：0； } 。容器 { 高度：100%；溢出：自动；显示：柔性；弹性方向：列； } #child-1 { 最小高度：100%；背景：rgb(255, 179, 179);...

html css flexbox

回答 1 投票 0

CSS显示网格悬停边框颜色变化

我希望创建一个如下所示的简单表格。当行悬停在其上时，我很难将行的边框更改为红色......只要该行不是标题行。所以...

html css flexbox

回答 2 投票 0

有没有一种简单的方法可以知道包装的 Flexbox 中有多少行？

我想对多行弹性盒内的每一行进行彩色条纹。容器{ 显示：柔性； flex-flow：行换行； } 有没有人发现一种简单的方法来确定弹性盒的行数？我

css flexbox

回答 2 投票 0

尝试在弹性盒中制作更小的条形

我想让弹性项目周围的空白变小。这本质上是一个带有子弹性盒的父弹性盒。这是我的html：我想让弹性项目周围的空白变小。这本质上是一个带有子弹性盒的父弹性盒。这是我的html： <div class="parent-box"> <div class="contain"> <div class="modal"> <h2>Plans For The Site</h2> <p><span class="date">~12-03-24 00:57~</span><br><span class=body>so, in order, i want to get this little blog thing working and looking the way i want, create the gifs and pictures for the background and buttons, create a font and add it, add some little music effects to everything, add some content to the different pages, add a little gir cursor, and then i think ill put the link up on my socials. once i get to the point of putting it up on my socials, ill subscirbe and get a domain name that i like... before that im just gonna keep working on the free subscription unless i run out of space. eta with the way im working looks to be about a week- 3 weeks, esp with the clothing im working on.</span> </div> </div> <div class="contain"> <div class="modal"> <h2>Plans For The Site</h2> <p><span class="date">~11-03-24 01:38~</span><br><span class=body>Just got the website front page done superficially, need to create the gifs and pictures and background, and need to figure out how to format this blog better than it is atm... make take a day or so... going to bed right now though</span></p> </div> </div> </div> 这是CSS： .contain { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .modal { width: 50vw; height: 50%; margin:30px; padding: 1rem; background-color: aqua; border: 1px solid black; border-top: 15px solid black; color: black; overflow: scroll; overflow-x: hidden; display: flex; flex-direction: column; text-align: left; } .parent-box { display: flex; width: 70%; height: 50vh; margin-left:auto; margin-right:auto; margin-bottom:10px; margin-top:10px; overflow: scroll; overflow-x: hidden; justify-content: space-between; align-items: center; flex-direction: column; font-size: 30px; text-align: center; background-color: #7d7d7d; color: #000000; font-weight: bold; } 我尝试过在所有三种CSS样式中使用边距，但它似乎没有任何作用。我只是想让顶部的灰色空间更小并且响应更快。花了我一段时间，但我自己弄清楚了，我需要将我的值从百分比更改为在子框中查看高度。然后我添加了边距以便能够自己控制空间。 .modal { width: 50vw; height: 30vh; < margin:20px auto 20px auto; <<-- add this to control the space yourself--> padding: 1rem; background-color: aqua; border: 1px solid black; border-top: 15px solid black; border-radius: 10px; color: black; overflow: scroll; overflow-x: hidden; display: flex; flex-direction: column; text-align: left; } 这应该可以解决任何想要做同样事情的人的问题。

html css flexbox

回答 1 投票 0

显示Flex水平居中问题

我在将 div 中的元素居中时遇到问题。我使用 display flex、align-self 和 justify-self 将其居中。我认为这样就可以了，但是当我从 t 检查时，我有一个未知元素......

css flexbox center display

回答 4 投票 0

将元素容器与 Flexbox 对齐

/* 通用选择器 */ * { 保证金：0；填充：0；框大小：边框框； } 身体 { 背景颜色: rgb(255, 255, 255); 颜色: RGB(51, 51, 51); 字体系列：无衬线字体； ...

css flexbox

回答 1 投票 0

flexbox 相关问题

最新问题