flexbox 相关问题

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

使用flex根据类型在右列或左列渲染数据

我想创建从数组填充的 html 视图。 该视图有两列,根据元素类型,我想将元素放在桌面 vi 的左列或右列中...

回答 1 投票 0

我需要设置弹性项目的固定宽度才能使弹性收缩起作用吗?

我很困惑为什么我的弹性收缩不起作用,直到我在我想要比其他项目收缩得更快的项目上设置固定的宽度或高度。 https://codepen.io/MH-123/pen/ExJWQWq 你可以在这里看到哦...

回答 2 投票 0

如何使 Flexbox 容器中的项目在悬停时展开至 2 列而不移动/影响其余项目?

我正在尝试在 Webflow 上重新创建此交互。 预期结果 到目前为止,我已经成功地重现了这个 一切正常,除了每行的第三列项目向下移动......

回答 1 投票 0

如何在采用整个容器宽度时使弹性项目收缩更多

原帖如下: 我重现了一个减少的问题: https://codepen.io/MH-123/pen/ExJWQWq?editors=1100 这是代码笔,请阅读下面的问题,它保持不变。我有两个 div,但是 f...

回答 1 投票 0

将云图标居中到导航边框背景的右中

我正在构建一个垂直导航栏,并且想要添加一个以右边框为中心、直接在背景线上的云图标。 ... 我正在构建一个垂直导航栏,并且想要添加一个以右边框为中心、直接在背景线上的云图标。 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div class="cloud-icon"> <svg>...</svg> </div> </nav> 这是code-pen示例。我非常努力地完成这项工作,因此我们将不胜感激任何和所有反馈。 我尝试过使用 flex-box、css-grid 和边距来做到这一点,老实说,只是让它定位并保持在右侧,我就陷入困境,更不用说移动响应了。 我编辑了 svg 视图框以使其居中 :root { --beige: #d9d9d9; } .contents { height: 100vh; width: 115%; margin: 0; display: grid; grid-template-columns: 1fr auto; } body { margin: 0; } nav { background-color: var(--beige); width: 50%; display: flex; } nav ul { list-style-type: none; margin: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; } nav li { padding: 3%; } nav a { text-decoration: none; font-size: 1rem; letter-spacing: 11px; } .cloud { grid-column: 2; align-self: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="contents"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> <span class="cloud"> <svg width="132" height="60" viewBox="127.037 138.437 123.778 64.061" xmlns="http://www.w3.org/2000/svg"> <path d="M 238.358 176.764 C 236.657 179.93 233.537 182.461 229.622 183.849 C 225.707 185.238 221.287 185.382 217.246 184.252 L 216.805 184.121 C 214.807 183.557 213.071 182.515 211.827 181.134 C 210.583 179.752 209.892 178.097 209.845 176.389 C 209.851 175.101 210.242 173.832 210.985 172.692 C 211.729 171.551 212.802 170.572 214.114 169.837 C 214.538 169.602 214.846 169.253 214.981 168.852 C 215.117 168.451 215.073 168.024 214.856 167.647 C 214.67 167.34 214.384 167.081 214.028 166.896 C 213.672 166.711 213.261 166.608 212.838 166.599 C 212.425 166.599 212.022 166.697 211.678 166.88 C 209.859 167.899 208.354 169.24 207.276 170.801 C 206.199 172.361 205.577 174.1 205.46 175.884 C 205.379 178.154 206.104 180.395 207.552 182.342 C 208.999 184.29 211.107 185.862 213.627 186.873 C 212.264 189.048 210.205 190.889 207.664 192.205 C 205.122 193.522 202.191 194.266 199.173 194.361 C 197.476 194.407 195.791 194.104 194.278 193.482 C 192.765 192.86 191.472 191.939 190.519 190.804 C 190.308 190.565 190.03 190.369 189.708 190.232 C 189.385 190.096 189.028 190.022 188.663 190.018 C 188.303 190.032 187.952 190.114 187.638 190.257 C 187.324 190.4 187.055 190.6 186.854 190.842 C 185.012 193.329 182.069 195.16 178.618 195.965 C 175.168 196.769 171.468 196.487 168.266 195.174 C 165.064 193.862 162.598 191.618 161.367 188.896 C 160.136 186.174 160.232 183.176 161.635 180.508 C 162.29 178.927 163.634 177.592 165.418 176.752 C 167.202 175.911 169.304 175.623 171.333 175.94 C 173.416 176.327 175.236 177.346 176.414 178.786 C 176.699 179.071 177.082 179.283 177.515 179.394 C 177.948 179.505 178.413 179.512 178.85 179.412 C 179.287 179.312 179.679 179.111 179.976 178.833 C 180.273 178.556 180.462 178.214 180.52 177.85 C 180.521 177.552 180.416 177.26 180.219 177.008 C 179.043 175.502 177.398 174.272 175.45 173.439 C 173.502 172.607 171.316 172.2 169.113 172.261 C 166.909 172.322 164.764 172.847 162.89 173.785 C 161.016 174.723 159.48 176.04 158.433 177.607 C 156.666 180.278 155.954 183.322 156.392 186.33 C 152.473 186.747 148.489 186.189 144.974 184.731 C 141.458 183.272 138.578 180.983 136.718 178.168 C 135.866 176.895 135.397 175.477 135.349 174.031 C 137.943 174.637 140.698 174.622 143.281 173.987 C 145.864 173.352 148.162 172.125 149.896 170.455 C 151.056 169.18 152.686 168.235 154.554 167.754 C 156.421 167.273 158.429 167.282 160.289 167.778 C 160.619 167.859 160.967 167.875 161.306 167.826 C 161.644 167.778 161.964 167.665 162.238 167.497 C 162.514 167.33 162.735 167.112 162.885 166.861 C 163.034 166.61 163.107 166.334 163.097 166.056 C 163.014 163.528 163.809 161.031 165.392 158.848 C 166.974 156.665 169.281 154.882 172.052 153.701 C 173.237 153.196 174.536 152.889 175.872 152.799 C 177.207 152.709 178.552 152.837 179.824 153.177 C 179.824 153.42 179.639 153.626 179.569 153.85 C 178.811 156.349 179.088 158.979 180.358 161.338 C 181.29 163.093 182.746 164.633 184.596 165.822 C 186.446 167.011 188.633 167.812 190.96 168.153 C 191.816 168.287 192.686 168.356 193.559 168.358 C 196.505 168.334 199.373 167.584 201.777 166.209 C 204.182 164.834 206.009 162.9 207.015 160.665 C 207.117 160.424 207.152 160.168 207.12 159.915 C 207.087 159.661 206.987 159.417 206.826 159.198 C 206.665 158.979 206.447 158.791 206.187 158.647 C 205.927 158.502 205.632 158.405 205.321 158.362 C 204.812 158.306 204.295 158.388 203.85 158.594 C 203.405 158.801 203.057 159.121 202.862 159.504 C 202.158 161.026 200.885 162.334 199.219 163.248 C 198.084 163.885 196.797 164.324 195.44 164.54 C 194.084 164.755 192.686 164.74 191.337 164.498 C 189.987 164.255 188.715 163.789 187.6 163.129 C 186.485 162.469 185.551 161.63 184.859 160.665 C 183.57 158.411 183.339 155.857 184.209 153.476 L 184.557 152.746 C 185.903 149.933 188.362 147.556 191.552 145.985 C 194.742 144.414 198.485 143.736 202.201 144.056 C 205.918 144.376 209.399 145.676 212.107 147.755 C 214.814 149.833 216.596 152.575 217.176 155.554 C 217.289 155.98 217.583 156.36 218.006 156.63 C 218.43 156.9 218.957 157.043 219.496 157.033 C 223.003 156.986 226.483 157.541 229.704 158.662 C 233.809 160.152 237.021 162.889 238.641 166.278 C 240.261 169.667 240.159 173.435 238.358 176.764 Z" fill="black" transform="matrix(1, 0, 0, 1, -3.552713678800501e-15, -3.552713678800501e-15)"/> </svg> </span> </body> </html>

回答 1 投票 0

如何让<flex-flow: column wrap>的item缩小宽度?

我有这个代码:https://codepen.io/MH-123/pen/wvZJPPZ?editors=0100 随着屏幕宽度变小,我希望左侧 2 个框 A 和 B 缩小其宽度,但我不确定如何实现这一点,因为我...

回答 1 投票 0

文本区域和按钮设置为宽度 90% 和 10%,但包装在 Flex 容器中[重复]

我希望输入框和发送按钮框在 Flex 行中彼此并排,输入占据宽度的 90%。但是,发送按钮位于输入下方,我不确定...

回答 2 投票 0

固定比例 - 最大“尺寸”

新手需要一些帮助。 如何保留一个 div,以固定的纵横比填充动态大小的容器的高度。 我有一个第一个全页网格设置为 1 2 6 和 2 fr 行,1 列...

回答 1 投票 0

为什么我的弹性项目与嵌套输入和按钮重叠

根据我的理解,chatFooter 的宽度应该是其父级的 100%。 聊天输入应占其宽度的 90%,聊天发送按钮应占其宽度的 10%。 然后里面的输入和按钮...

回答 2 投票 0

Flex 元素中的 Chart.js 溢出而不是收缩

我尝试将 Chart.js 的包装 div 上的最小宽度设置为 0,但是如果您拖动窗口,图表将会增大,然后不会缩小。 我想不通!唯一的事情...

回答 6 投票 0

两个弹性行容器的项目设置为宽度 90% 和 10%,但正在换行

我希望输入框和发送按钮框在 Flex 行中彼此并排,输入占据宽度的 90%。但是,发送按钮位于输入下方,我不确定...

回答 1 投票 0

如何在 Flexbox 中的项目之间创建间距?

我试图将子 Flexbox 放在父 Flexbox 中,使其位于一行中,垂直和水平居中,并在 CSS 中使用间隙属性在它们之间留有空间,但图像和嵌入的

回答 2 投票 0

CSS Grid、FlexBox - 如何防止容器重叠?

我有一个可以绘制卡片并显示文本的网页。文本和图像重叠。 我不知道如何使它们不与 FlexBox、网格 CSS 重叠。 var 对象; $(文档).ready(函数() ...

回答 1 投票 0

为什么图像弹性项目在 Firefox 和 Chrome 中表现不同?

我正在学习 Flexbox 以及如何将 Flex 项目放置在 Flex 容器内,其初始宽度为 Flex-Basis,然后分别在存在负空间和正空间时收缩和增长。

回答 1 投票 0

如何使用 DIV 对 Flexbox 项目进行分组,但不影响布局,就好像 DIV 不存在一样?

我在 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>

回答 1 投票 0

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

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

回答 1 投票 0

grid css 2 列和第二列 2 行

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

回答 1 投票 0

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

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

回答 1 投票 0

Flexbox:如何将行的元素拉伸到全宽?

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

回答 2 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.