flexbox 相关问题

子组件溢出其弹性容器父组件并且不遵守 100% 的最大宽度

这是我在应用程序中遇到的问题的一个过于简单的示例。我有一个弹性卡网格。这些卡片是最小宽度为 250px 且属性 flex: 1 的弹性项目，因此它们占用了同样多的空间...

React 组件的显示问题。使用 Flexbox 时出现意外的尺寸

我正在使用 NextJS/React 启动一个简单的测试应用程序。 下面是代码： Board.tsx 文件内容： 导入'./Board.css'; 导出默认函数 Board() { 返回 我正在使用 NextJS/React 启动一个简单的测试应用程序。 以下是代码： Board.tsx 文件内容： import './Board.css'; export default function Board() { return <div className="board"> <Row/> <Row/> <Row/> </div> } /* End of Board */ function Row() { return <div className="row"> <Cell/> <Cell/> <Cell/> </div> } /* End of Row */ function Cell() { return <div className="cell"/> } /* End of Cell */ 以及 Board.css 文件内容： .cell { width: 3rem; height: 3rem; background-color: rgb(255, 255, 0); border-width: 2px; border-color: rgb(55, 55, 55); margin: 11%; } .row { display: flex; flex-direction: row; } .board { display: flex; flex-direction: column; } 顶部是 app/page.tsx 文件： import Image from 'next/image' import Board from './components/Board' export default function Home() { return ( <main className="flex min-h-screen flex-col items-center justify-between p-24"> X4C APP <Board/> </main> ) } 以下是运行应用程序时网络浏览器中显示的内容： 最后我有一个问题。当 css 规定单元格组件的宽度和高度固定时，为什么我们看不到完美的黄色方块？ 通过实验我可以看到，如果我删除这两个块 .row {...} .board {...} 从 Board.css 文件中，我得到完美的正方形。 那么是什么导致这两个区块出现这个问题呢？ 这是因为您在这里以百分比 (margin: 11%;) 的形式给予 Cell 保证金。如果你将其更改为某个绝对值，例如 10px / 10rem，你会看到完美的正方形

如何防止按钮在 html 和 css 中按下搜索栏？

我正在创建一个标题。它的左侧有一个标志，右侧有一个搜索栏和相应的搜索按钮。我已经添加了徽标和搜索栏。然后我添加了按钮。 ...

有没有办法让这些动态div的宽度与前四个相同？

正如您在此 Tailwind REPL 中所看到的：https://play.tailwindcss.com/in8MDw0Zwb 5、6 和 7 div 比 1、2、3 和 4 大。 有没有办法让它们的宽度与第一个宽度相同...

有没有办法让这些div的宽度与前四个相同？

正如您在此 Tailwind REPL 中所看到的：https://play.tailwindcss.com/in8MDw0Zwb 5、6 和 7 div 比 1、2、3 和 4 大。 有没有办法让它们的宽度与第一个宽度相同...

由 flex-grow 调整大小的弹性项目中包含的文本上的省略号

我有一行，使用Flexbox，其中包含单元格。 我希望第一个单元格的文本位于一行并用省略号截断。 一切都保持响应。 然而...

如何将动态表格设置为可滚动的动态固定大小，由视口和相邻 div 确定？

我正在使用 Preact 与 Tailwind 和 daisyUI 来制作我的应用程序。这个想法是屏幕将有两个选项卡，每个选项卡左侧有一个文本区域，右侧有说明/结果。 我使用 daisyUI 的...

如何选择带有换行的奇数 Flex 行中的奇数元素？

我试图解决 CSS 之战。 正如您所看到的，奇数行中的奇数元素和偶数行中的偶数元素是橙色的。如何在不手动选择元素的情况下做到这一点： div:第 n 个...

如何使用css中的flexbox将子元素定位在父元素的另一侧

我正在为一个网站制作标题。我的徽标位于右侧，我想将搜索栏放在左侧。我正在用 css 编码并尝试使用 flexbox。 我已经尝试了很多事情。这是我的...

CSS 边框加倍伸缩

我正在使用一段CSS。每当我将“display: flex”属性添加到 .student 时，边框就会突然加倍。我需要 flex 属性，因为我希望文本居中...

如何让弹性盒子项与动态高度的第一个子项的高度相匹配？

假设我有一个包含 3 个元素的 Flexbox： 第一个孩子有 4-7 行。 第二个孩子有40-50行。 第三个孩子有2-5行。 我想将第二个孩子的身高设置为与第一个孩子相同......

如何在css中显示flex子div自定义宽度

我正在尝试设置 Flex 容器的第一个子 div 和第二个子 div 的宽度。但它不起作用。那么，如何在css中设置flex div的自定义宽度。如果有人知道答案请帮忙...

嵌套弹性框无法与滚动条/溢出自动一起使用

我正在开发具有以下要求的布局： 高度由最外层控制 每个框中的最后一个元素填充其框的高度，并且其内容不会溢出，即显示 scr... 我正在开发具有这些要求的布局： 高度由最外层控制<div> 每个框中的最后一个元素填充其框的高度，并且其内容不会溢出，即如果太长则显示滚动条。 我当前的解决方案是使用 flex-direction: column、flex: 1 和 overflow: auto。但是，它不适用于嵌套 Flexbox： 无嵌套：我的解决方案有效 .wrapper { height: 100px; display: flex; flex-direction: column; } .bottom { flex: 1; overflow: auto; } <div class="wrapper"> <div>sth</div> <div class="bottom"> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" </div> </div> 嵌套：我的解决方案不起作用 .wrapper-outer { height: 100px; display: flex; flex-direction: column; } .wrapper { flex: 1; display: flex; flex-direction: column; } .bottom { flex: 1; overflow: auto; } <div> <div>sth</div> <div class="wrapper"> <div>sth</div> <div class="bottom"> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" </div> </div> </div> 除了完全避免嵌套之外，我怎样才能完成这项工作？ 您的代码有两个问题：1.您没有在最外面的div上设置类.wrapper-outer，2.未处理溢出。 通过添加缺少的类和 overflow: auto; 到 .wrapper，你应该得到你想要的结果： .wrapper-outer { height: 100px; display: flex; flex-direction: column; } .wrapper { overflow: auto; flex: 1; display: flex; flex-direction: column; } .bottom { flex: 1; overflow: auto; } <div class="wrapper-outer"> <div>sth</div> <div class="wrapper"> <div>sth</div> <div class="bottom"> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" </div> </div> </div>

如何以底部对齐形式对齐具有多行错误的输入？

我有一个具有底部对齐行为的表单，我需要一行中的所有输入都与底部对齐并在视觉上位于一行。原因是标签可以包含说明...

有没有办法从网格或弹性框中动态取出HTML元素？

有没有办法，如果我有这样的网格： 。网格 { 显示：柔性； 调整内容：开始； } 1 ... 有没有办法，如果我有这样的网格： .grid { display: flex; justify-content: start; } <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> 通过应用 .right 类，一些元素会脱离顺序并放置在网格的末尾并向右对齐 (end)。 我正在努力实现这样的目标： 困难来自于提前不知道会有多少.left和.right物品... Flexbox 可以在适当的元素上使用 order 和 margin 来实现这一点。 我们还可以利用 :nth-child(n of x) 来选择要应用边距的第一个分类元素。 支持 .flexy { display: flex; margin-top: 25px; } .item { border: 1px solid grey; padding: 0.25em; } :nth-child(1 of .right) { margin-left: auto; } .right { order: 2; } <div class="flexy"> <div class="item">Item 1</div> <div class="item right">Item 2</div> <div class="item">Item 3</div> <div class="item right">Item 4</div> </div> <div class="flexy"> <div class="item">Item 1</div> <div class="item right">Item 2</div> <div class="item">Item 3</div> <div class="item right">Item 4</div> <div class="item">Item 5</div> <div class="item right">Item 6</div> </div>

CSS 中按钮之间的间隙

我希望按钮全部粘在一起，之间没有任何间隙来设计计算器。 但即使在尝试删除边框、填充和边距后，我也无法消除一个间隙......

如何在 Flex 容器下方添加图像，同时使两个元素都能响应媒体查询？

我是 Flexbox 新手，非常想在 Flex 容器下方添加一个单独的独立图像。我希望“底部”元素的图像和容器的元素都是

待办事项列表 CSS 定位

如何将待办事项列表栏的新列表项上的 2 个按钮移至右侧。 我只想知道将按钮添加到任务栏右侧的常见方法是什么。 我尝试使用 justify-

HTML/CSS 中的按钮溢出

我遇到按钮从容器溢出的问题。我向按钮添加了 width: 100% 但没有任何帮助。 身体{ 高度：100vh； 显示：柔性； 弹性方向：列； 对齐-

HTML/CSS 中的按钮溢出

我有一个问题，按钮从容器中溢出。我尝试在 YouTube 上查找，我向按钮添加了 width: 100% 但没有任何帮助。 身体{ 高度：100vh； 显示：柔性； 灵活可怕...