flexbox 相关问题

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

显示Flex水平居中问题

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

回答 4 投票 0

将元素容器与 Flexbox 对齐

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

回答 1 投票 0

如何使用CSS让一个元素收缩到某一点,然后兄弟元素收缩到某一点,然后包裹元素?

我的弹性盒子里有 2 件物品。当有足够的水平空间可用时,我希望右侧元素具有最大宽度,而左侧元素占据所有剩余空间。由于有用...

回答 2 投票 0

CSS ::Before 是断线

我对CSS不太有经验,我在网上搜索过,但没有找到这个问题的解决方案。由于某种原因,::before 和文本没有保持在同一行。我还有另一个温度...

回答 1 投票 0

Flexbox 属性应用于文本而不是 Flex 容器

我是一名经验不足的程序员,使用 HTML 和 CSS 创建温度转换器网站。我正在使用一个容器来显示文本“温度转换器”,我希望将其显示在...

回答 1 投票 0

设置 max-width 时 img 宽度的行为

我有一个列表(ul),其中每个项目(li)包含一个图标和一个文本范围。该列表嵌套在一个容器内,该容器可能没有足够的宽度来容纳它。这是代码 我有一个列表(ul),其中每个项目(li)包含一个图标和一个文本范围。该列表嵌套在一个容器内,该容器可能没有足够的宽度来容纳它。这是代码 <div class="root"> <div class="container"> <ul class="list-container"> <li> <img class="icon" src="https://jsfiddle.net/img/favicon.png" /> <span>Hello World !!!</span></li> <li> <div class="icon"></div><span>JavaScript</span> </li> <li> <div class="icon"></div> <span>Rust</span> </li> </ul> </div> </div> * { border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; } .root { display: flex; justify-content: center; } .list-container { border: 1px solid black; padding: 24px; list-style:none; display: flex; flex-direction: column; } .list-container li { border: 1px solid green; margin-top: 10px; white-space: nowrap; display: flex; align-items: center; } .icon { background: green; width: 16px; height: 16px; max-width: 100%; margin-right: 14px; } .list-container li:first-child { margin-top: 0; } .container { display: flex; flex-direction: column; align-items: center; padding: 10px; width: 50px; } 如果“div”容器的宽度比“ul”窄,则会出现奇怪的行为。当图标是最大宽度为 100% 的“img”时,跨度内的文本会超出“li”的边界。但是,如果“img”缺少最大宽度设置或用“div”替换,则“li”成功容纳图标和跨度的完整宽度。结果可以在这里检查(https://jsfiddle.net/c508dz6o/1/) 我知道我可以使用自定义列表标记或其他方式获得相同的结果。然而,我真的很想了解导致图像最大宽度出现这种行为的 CSS 规则。谁能帮我解决这个问题吗? 只需删除 max-width 并保留 width:16px;在你的 .icon 中,它们的行为是相同的(没有溢出)。请记住您的小提琴图像初始大小设置为 32px * { border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; } .root { display: flex; justify-content: center; } .list-container { border: 1px solid black; padding: 24px; list-style:none; display: flex; flex-direction: column; } .list-container li { border: 1px solid green; margin-top: 10px; white-space: nowrap; display: flex; align-items: center; } .icon { background: green; width: 16px; height: 16px; margin-right: 14px; } .list-container li:first-child { margin-top: 0; } .container { display: flex; flex-direction: column; align-items: center; padding: 10px; width: 50px; } <div class="root"> <div class="container"> <ul class="list-container"> <li> <img class="icon" src="https://jsfiddle.net/img/favicon.png"/> <span>Hello World !!!</span></li> <li> <div class="icon"></div><span>JavaScript</span> </li> <li> <div class="icon"></div> <span>Rust</span> </li> </ul> </div> </div>

回答 1 投票 0

有什么方法可以让 CSS flex 向下流动同时有多列吗?

我有以下弹性组件: ul { 显示:柔性; 弯曲方向:行; 间隙:8px 32px; 弹性包裹:包裹; } 李{ 弹性基础:计算(33% - 32px); } 托尼和 我有以下弹性组件: ul { display: flex; flex-direction: row; gap: 8px 32px; flex-wrap: wrap; } li { flex-basis: calc(33% - 32px); } <ul> <li>Toni and Dwight Beavers</li> <li>Debra Coleman</li> <li>Ashley Dwight</li> <li>Paul and Madeline Green</li> <li>Jon and Allison Kelly</li> <li>Samar and William Longjohnson</li> <li>J. May Liang and James Linament</li> <li>Timothy R. Landry</li> <li>Carrie and David Mason</li> <li>Luke Frazier and Robert Peters</li> <li>Mei Xu and Allessandro Reiner</li> <li>Jennifer and Jimmy Revesi</li> <li>Cinthia and Horacio Rozalyn</li> <li>Margarita Arroyave-Wessel and David Wemmer, MD</li> <li>Angela and Kyle Westberger</li> <li>Linda D. Rabbitt and John Wheaton</li> <li>Kathie and Mike Wiener</li> <li>Rochdi Young</li> </ul> 它看起来应该是这样的,但它从左到右流动,而客户希望它向下流动,以便每列按字母顺序向下排列。 我尝试使用第 3 列来执行此操作。 ul { columns: 3 } li { padding-bottom: 8px; padding-right: 32px } <ul> <li>Toni and Dwight Beavers</li> <li>Debra Coleman</li> <li>Ashley Dwight</li> <li>Paul and Madeline Green</li> <li>Jon and Allison Kelly</li> <li>Samar and William Longjohnson</li> <li>J. May Liang and James Linament</li> <li>Timothy R. Landry</li> <li>Carrie and David Mason</li> <li>Luke Frazier and Robert Peters</li> <li>Mei Xu and Allessandro Reiner</li> <li>Jennifer and Jimmy Revesi</li> <li>Cinthia and Horacio Rozalyn</li> <li>Margarita Arroyave-Wessel and David Wemmer, MD</li> <li>Angela and Kyle Westberger</li> <li>Linda D. Rabbitt and John Wheaton</li> <li>Kathie and Mike Wiener</li> <li>Rochdi Young</li> </ul> 这会按正确的顺序对它们进行排序,但不再定义行,并且元素不会像使用 flex 时那样水平对齐。 有什么办法可以两者兼得吗?无论是使用 Flex、列还是网格,我只想让它看起来与 Flex 相同(对齐行,所有元素在类似网格的外观中保持平衡),但沿着列向下流动而不是横向流动。就像下图一样,我通过将高度硬编码到每个 li 元素上来手动实现 CSS-Grid 可以通过定义的行数来管理。 ul { padding: 0; margin: 0; list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, 1fr); } li { padding: .25em; border: 1px solid grey; margin-bottom: .25em; } <ul> <li>Toni and Dwight Beavers</li> <li>Debra Coleman</li> <li>Ashley Dwight</li> <li>Paul and Madeline Green</li> <li>Jon and Allison Kelly</li> <li>Samar and William Longjohnson</li> <li>J. May Liang and James Linament</li> <li>Timothy R. Landry</li> <li>Carrie and David Mason</li> <li>Luke Frazier and Robert Peters</li> <li>Mei Xu and Allessandro Reiner</li> <li>Jennifer and Jimmy Revesi</li> <li>Cinthia and Horacio Rozalyn</li> <li>Margarita Arroyave-Wessel and David Wemmer, MD</li> <li>Angela and Kyle Westberger</li> <li>Linda D. Rabbitt and John Wheaton</li> <li>Kathie and Mike Wiener</li> <li>Rochdi Young</li> </ul>

回答 1 投票 0

Flexbox - 左侧为文本,右侧为图像的矩形

制作一个仪表板,其中有一列填充了矩形,用于访问不同的应用程序。 每个应用程序都表示为一个灰色矩形,其中包含应用程序名称和图像。

回答 1 投票 0

防止固定比例的项目在生长时溢出交叉轴上的柔性容器

我需要将 1x1 的项目(可能是头像)放入预定比例的弹性行容器中,该比例可以根据父母的增长而增长。问题是,在一定数量的项目下,它们会溢出

回答 1 投票 0

显示 Flex 属性是否像父元素一样适用于内部元素

当我了解到显示:flex;仅适用于容器(父项),但在下面的代码中,当我在子项(项)中使用弹性框属性时,例如对齐项、对齐内容,为什么子项(项)

回答 1 投票 0

Flexbox 将内部元素的高度设置为 0

我对弹性盒有疑问。当我设置段落的高度并将其溢出设置为隐藏时,该段落会在 Flexbox div 中消失。 这是小提琴: https://jsfiddle.net/Slit/0yy3q8bL/

回答 5 投票 0

如何将 Flexbox 项目缩放到其包含图像的大小

我想使用 Flexbox 创建一个响应式图像库,其中每行都有不同尺寸的图像,这些图像缩放到相同的高度,同时保留纵横比。例如,如果一行有...

回答 1 投票 0

如何在 Flexbox 中设置图像格式以避免溢出和裁剪

我想使用 Flexbox 创建一个响应式图像库,其中每行的图像缩放到相同的高度,同时保留纵横比而不是裁剪。 为了强调我的意思,这里有一些

回答 1 投票 0

使用flexbox的弹出菜单

我正在尝试使用 FlexBox 构建一个标头组件。这是我想要实现的目标的图片: 红色框是一个弹性框。绿色框是弹性框内的每个 元素... 我正在尝试使用 FlexBox 构建一个标头组件。这是我想要实现的目标的图片: 红色框是一个弹性框。绿色框是 Flexbox 中的每个 <div> 元素。最右边的元素(标记为 3)有一个与其连接的单击事件。这个想法是,当单击该框时,会在其下方立即弹出一个菜单,但不在其中。 我尝试过使用 div 3 和 4 的绝对和相对定位,但没有任何组合能够实现我想要的效果。我能做的最好的事情就是在 div 4 上使用绝对定位。它按照预期与 div 3 分开弹出,但 div 4 的宽度不会比 div 3 更大,并且内容会换行。 我怎样才能在 div 4 中有一个弹出元素,它从自己的内容中获取宽度,并且不换行? 假设您有一个如下所示的简单标记结构,那么最有可能使用绝对定位来实现这一点 div 这会将您的 popup 显示在 parent 之外,并且对宽度/高度没有限制 我在这里选择将 popup 放在 3:rd div 之外,因为它可以让您更灵活地根据响应能力(不同的屏幕尺寸等)来定位它 基于脚本的版本 document.querySelector('.click').addEventListener('click', function(e){ e.target.nextElementSibling.classList.toggle('clicked'); }) .parent { position: relative; display: flex; border: 1px solid red; } .parent div { flex: 2; border: 1px solid lime; margin: 1px; } .parent div:nth-child(2) { flex: 3; } .parent div:nth-child(3) { flex: 2; } .parent .popup { display: none; position: absolute; right: -2px; top: calc(100% + 3px); border: 1px solid blue; } .parent .popup.clicked { display: block; } <div class="parent"> <div> 1 </div> <div> 2 </div> <div class="click"> 3 <br> (click to toggle) </div> <div class="popup"> This one can have text <br> that does pretty much what you want </div> </div> 这也可以在没有任何脚本的情况下使用 label 和 checkbox 来完成 已更新 单击页面中的任意位置时popup会关闭(感谢我爱CSS) .parent { position: relative; display: flex; border: 1px solid red; } .parent div { flex: 2; border: 1px solid lime; margin: 1px; } .parent div:nth-child(2) { flex: 3; } .parent div:nth-child(3) { flex: 2; } .parent .popup { display: none; position: absolute; right: -2px; top: calc(100% + 3px); border: 1px solid blue; } .parent .modal { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: white; opacity: 0.3; } .parent .click label[for=chkbox] { display: block; } #chkbox { display: none; } #chkbox:checked ~ .modal, #chkbox:checked ~ .popup { display: block; } <div class="parent"> <div> 1 </div> <div> 2 </div> <div class="click"><label for="chkbox"> 3 <br> (click to toggle) </label></div> <input type="checkbox" id="chkbox"> <label class="modal" for="chkbox"></label> <div class="popup"> This one can have text <br> that does pretty much what you want </div> </div> 又一个没有任何脚本的版本,使用 :focus 已更新 使用popup使:hover持续存在,因此链接也可以工作(感谢Andrei Gheorghiu) .parent { position: relative; display: flex; border: 1px solid red; } .parent div { flex: 2; border: 1px solid lime; margin: 1px; } .parent div:nth-child(2) { flex: 3; } .parent div:nth-child(3) { flex: 2; } .parent .popup { display: none; position: absolute; right: -2px; top: calc(100% + 3px); border: 1px solid blue; } .click:focus + .popup { display: block; } .click + .popup:hover { display: block; } <div class="parent"> <div> 1 </div> <div> 2 </div> <div class="click" tabindex="-1"> 3 <br> (click to toggle) </div> <div class="popup"> This one can have text <br> that does pretty much what you want <br><br> <a href="#" onclick="alert('hey');">links included</a> </div> </div> 编辑2:使用此设置,您不需要在下拉菜单中硬编码任何top值,因此获得灵活性并保持与导航栏的对齐(即使在不同视口宽度上调整大小时)。 $(".item-red").on("click", function() { $(".item-dropdown").toggleClass("display"); }); .container { display: flex; flex-flow: row wrap; text-align: center; } .item { flex: 2; padding: 5px; margin: 0; } .item-blue { background: lightblue; } .item-green { background: lightgreen; flex: 3; } .item-red { background: lightgray; flex: 1; } .item-red:hover { cursor: pointer; } .container-dropdown { display: flex; flex-flow: row wrap; position: relative; text-align: center; } .item-dropdown { width: 240px; display: none; background: gold; position: absolute; right: 0; z-index: 1; padding: 5px; } .display { display: flex; } .content { text-align: center; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="item item-blue">Lorem</div> <div class="item item-green">Lorem ipsum dolor kjghj</div> <div class="item item-red">Lorem ipsum dolor </div> </div> <div class="container-dropdown"> <div class="item-dropdown">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga voluptate, ipsum consequuntur maiores unde laboriosam suscipit velit corporis.</div> </div> <div class="content">Content - lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam delen iti soluta qui, incidunt, neque est doloribus esse deserunt modi, mollitia delectus illum! Ullam nihil reiciendis animi eligendi nemo non. Incidunt.</div> 这是下拉菜单的正常行为,“菜单栏”项目的显示方式(Flex、框或表格)并不重要。条件是: 家长有 position:relative; 孩子有 position:absolute; top: 100%; 您是否希望子级在 hover 上可见,或者父级是否应用了某个类,都是 UI/UX 和个人选择的问题。 使用负边距,您可以将下拉菜单设置为大于父级。或者您甚至可以将它们设置为全页面大小并像超级菜单一样(记住它们是绝对定位的)。 这是一个例子: body { margin: 0; padding: 0; background-color: #f5f5f5; } .flex-menu { display: flex; background-color: white; } .flex-menu > * { position: relative; flex: 1 0 auto; padding: 10px; border-right: 1px solid #eee; cursor: pointer; } .flex-menu > *:last-child { border-right: none; } .flex-menu > * .submenu { position: absolute; top: 100%; left: 0; display: none; background-color: white; border-top: 1px solid #eee; padding: 10px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12) } .flex-menu .has-megamenu { position: static } .flex-menu > * .submenu.megamenu { width: 100vw; left: 0; top: 39px; box-sizing: border-box; } .flex-menu > *:hover .submenu { display: block; } .flex-menu > *:last-child .submenu { right: 0; margin-left: -100%; } <div class="flex-menu"> <div>first item</div> <div>second item <div class="submenu"> This is a dropdopwn content. </div> </div> <div class="has-megamenu">third item <div class="submenu megamenu"> This is a mega menu dropdopwn content. You can put anything here. A full page, of content, if you want </div> </div> <div>fourth item <div class="submenu"> This is a dropdopwn content. </div> </div> </div> 至于您的要求: 从它自己的内容中获取宽度,并且不换行 通常,您将创建一个具有透明背景的“大型菜单”(全内容宽度)子菜单,并使用 float:right 或 flex 将内容放置为该大型菜单的子菜单。我假设您希望它最终在达到完整内容宽度时换行。示例: var closeDrops = function(e) { $('.flex-menu div').removeClass('active'); } $('body').on('click', closeDrops); $('.flex-menu div').on('click', function(e){ if (!$(this).hasClass('active')) { closeDrops(); } e.stopPropagation(); $(this).toggleClass('active'); }) body { margin: 0; padding: 0; background-color: #f5f5f5; min-height: 100vh; font-family: sans-serif; } .flex-menu { display: flex; position: relative; } .flex-menu > * { position: relative; flex: 1 0 auto; padding: 10px; border: solid white; border-width: 0 1px 1px 0; cursor: pointer; transition: background-color .3s ease-in-out; } .flex-menu > *:last-child { border-right: none; } .flex-menu > * .submenu { position: absolute; top: 100%; left: 0; display: none; background-color: white; border-top: 1px solid #eee; padding: 10px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12) } .flex-menu .has-megamenu { position: static } .flex-menu > * .submenu.megamenu { width: 100vw; left: 0; box-sizing: border-box; } .flex-menu > *:hover .submenu,.flex-menu > *.active .submenu { display: block; } .flex-menu > *.active, .flex-menu > *:hover { box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12); background-color: white; } .flex-menu > *.active{ z-index: 1; } .flex-menu > *:hover { z-index: 2; } .has-megamenu:last-child .megamenu{ background-color: transparent; padding: 0; box-shadow: none; } .has-megamenu:last-child .megamenu > * { box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12); } .placed-right { background-color: white; padding:10px; float: right; } @media (max-width: 500px) { .flex-menu { flex-direction: column; } .flex-menu > * .submenu { width: 100vw; box-sizing: border-box; } .placed-right { float: none; width: 100%; display: block; box-sizing: border-box; } .flex-menu .has-megamenu { position: relative; } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flex-menu"> <div>first item</div> <div>second item <div class="submenu"> This is a dropdopwn content. </div> </div> <div class="has-megamenu">third item <div class="submenu megamenu"> This is a mega menu dropdopwn content. You can put anything here. A full page, of content, if you want </div> </div> <div class="has-megamenu">fourth item <div class="submenu megamenu"> <span class="placed-right"> I am right-aligned and I don't care about my parent's width, ok? <hr />I'll only wrap when I don't fit in page. </span> </div> </div> </div> 注意我在此代码段中添加了下拉菜单的点击切换功能。

回答 3 投票 0

div 在列上时宽度不一样

我尝试创建一个最大宽度为400px的3 div容器;当我将方向更改为 flex-direction: column; 后我失去了容器的宽度。 (将 flex-direction 更改为列后我的

回答 1 投票 0

Flexbox 子项扩展容器而不是溢出

我正在尝试使用 Flexbox 创建布局,但我很困惑为什么我不能强制 UI 的特定部分用滚动条溢出。一切似乎都很顺利,直到一个大孩子......

回答 2 投票 0

连续取所有真实剩余空间

我想在 Flutter 中创建一个带有头像和一些文本的行。目前,文本通过扩展占据了所有剩余的水平空间。我想去掉下面的左边的空格...

回答 1 投票 0

FlexLayoutModule 不适用于 Angular 11

我今天更新到版本11了。我的包 json 如下。 FlexLayoutModule 不再使用指令来处理和格式化 div。看起来根本没有发生任何事情,但我不……

回答 3 投票 0

Safari 将元素放置在 Flex 列之外

我有以下 HTML 和 CSS: 。容器 { 显示:柔性; 最小高度:100vh; 弯曲方向:列; 间隙:2px; } .header-nav, .页脚导航, 。容器 { 内边距:4px; } .主要-co...

回答 1 投票 0

有谁知道如何创建水平增长并具有水平滚动的项目列表?

这是我的代码: .wrap-here { 显示:柔性; 间隙:5px; 弹性包裹:包裹; 宽度:250px; 溢出:自动; } 。物品 { 弹性:0 0 20%; 边框:1px 纯黑; 内边距:10px; 下边距:5px; ...

回答 1 投票 0

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