{ flex-direction: column; <div class="d-flex-column h-100" style="flex: 1; gap:0.5em
浏览 99提问于2021-07-09得票数 0
我有一个使用gap作为间隔的柔性盒，它需要支持“换行”，这会导致后续的flex项跳到下一行。我看到的所有示例都建议使用具有flex-basis: 100%的新的flex项(参见下面的示例)来执行此操作，但是这将导致行之间出现双倍大小的间隔，这与常规项包装引起的其他行不同。{ flex-flow: row wr
浏览 9提问于2022-05-27得票数 2
2回答
比如说，我们有这样的设计： <div className="w-1/2"></div>
间隙-4=间隙:16 g
浏览 10提问于2022-07-28得票数 0
什么是start、end、self-start和self-end？它们与flex-start和flex-end有何不同 display: flex; align-itemswhite; font-family: san
浏览 4提问于2018-06-19得票数 37
回答已采纳
2回答
出于学习的目的，我尝试创建了一个基于flexbox的网格系统，但是在使用它创建了一些东西之后，我发现了一些问题:当总的列占据100%的空间时，最后一列转到下一行(容器是flex-flow: row wrap我现在的疑问是:列的宽度应该使用什么？弹性基础？宽度 如何解决这个具有边际的问题？我在github项目中见过一个使用类似"gap“的东西，但我仍然不太理解它是如何工作的…… 我尝试添加c
浏览 7提问于2019-02-09得票数 0
3回答
作为Flexbox的新手(虽然在CSS中有经验)，在我看来，我读过的大多数教程都很方便地“忽略”了一件事，那就是flex项之间的间距。
请注意flex项之间的空格。尽管在任何地方都没有提到，在示例代码中也没有提到，但似乎获得空格的唯一方法是使用css页边距。因为我需要创建的是这个，很像上面的“中心”演示：
然而，当我自己尝试的时候，我当然会得到这样的结果：
如果我使用空格键，我得到的是
浏览 1提问于2015-06-13得票数 22
回答已采纳
我的预期结果：
实际结果：
我试过利润率和其他东西，但似乎没有什么效果。我的代码： height: 69.25vh; align-items: center; display: flex; justify-content: center; display: flex;
margin-to
浏览 6提问于2022-09-12得票数 0
回答已采纳
1回答
我试图用Flexbox (不是网格！)来安排我的容器。{ display: flex;}
flex: 1 1 auto; gap: 1rem;}
display: flex;
flex: 1 1
浏览 5提问于2022-02-08得票数 1
回答已采纳
4回答
overflow 调整代码大小，低于530 px以显示main{ grid-template-columns:1fr; border: 2px solid red;section{} display: flex; gap: 1rem;.box{
浏览 10提问于2022-01-07得票数 0
回答已采纳
是否有一种方法可以指定列宽比和最小宽度以允许对窄屏幕进行包装(响应设计)？我试过以下几种方法：
display: flex; justify-content: center;}
flex-ba
浏览 12提问于2022-08-04得票数 1
并且只有行中的前2项具有margin-right of 16px。
问题是CSS正在向所有项中添加一个margin-right of 16px。如何更新代码，使之成为每行3项，其中每一行仅第1项和第2项就有margin-right填充？我有一个令人讨厌的版本，我制作了margin-right和margin-left 8px，然后在容器中添加了一个负的-8px保证金，但这感觉很麻烦，我很好奇现在是否有更优雅的方法来使用
浏览 0提问于2018-04-24得票数 4
回答已采纳
2回答
我们有一个用Flexbox完成的瓷砖项目的遗留部分。项目的容器是一个ul。text-align: center; border: 1px solid #ccc; padding: 10px;我不得不使用一个宽度和高度，因为瓷砖有不同的内容，我需要他们是相同的大小。显然，如果我可以使用css网格，我就不会有这样的问题。
因此，我试图在网格的@su
浏览 5提问于2017-05-15得票数 1
回答已采纳
一旦浏览器窗口宽度达到992px和更低，我想要更改，这样..flexbox项就占用了容器的50%的宽度。问题是:如果我没有在..flexbox容器上使用“gap”属性，但是一旦我输入了gap: 1em，那么百分比就不能正常工作了，因为我知道gap是被考虑在内的，并且把这些.don项目的宽度相加。问题:我如何正确地确保一旦浏览器窗口是992 so或更低，每个flexbox项占50%，这样我就可以在每一行中有两列，因为显
浏览 6提问于2022-05-25得票数 1
回答已采纳
1回答
是否可以像css中的flex项一样收缩网格项？网格项.container { grid-gap: 10px;
而我不能通过使用网格布局来实现相同的行为。Flex布局允许在小屏幕上收缩项，而<e
浏览 1提问于2018-10-21得票数 7
回答已采纳
我正在尝试使用CSS grid的auto-fit特性来为不同的屏幕尺寸整齐地包装网格项目。当我放入auto-fitted网格容器中的所有项的大小都相同时，这种方法效果很好；但是，如果我将项设置为不同的大小，对于较小的屏幕尺寸，当项换行时，我会得到不需要的大小。：
图1是当两个项目在全屏情况下大小相等时显示的内容-这是对图2的概括。图3是当两个项目的<
浏览 1提问于2017-12-12得票数 0
1回答
变宽瓷砖的柔性盒顺序
、、、
这里是小提琴- (在本例中，我尝试在第一行中设置2个蓝色块和绿色块，在第二个行中有4个蓝色块，而不必使用CSS或JS设置顺序)。 display: flex; flex-wrap: wrap;}
flex-grow: 1;
flex-basis:
浏览 3提问于2017-06-01得票数 3
1回答
做尾风网格的正确方法？
、、、
我刚刚开始使用Tailwind，我对如何正确使用网格/行和列感到有点困惑。下面是我看到使用的不同方法..。方法1： <div class="my-1 px-1 w-1/2"> <&#x
浏览 8提问于2021-10-20得票数 1
回答已采纳
1回答
它与CSS grid和grid-auto-rows: 1px一起工作。其中有一个JS recalc脚本，它重新计算grid-row-end值(带有span前缀)。随着光栅的扩展，项目的高度被计算为空隙的倍数，因此网格项的底部对齐得更好一些)。
On慢速机器(尤指)在Chrome中，它可能会变得有点滞后(不太显着)，所以我想稍微改进一下性能。我使用getElementsByClassName而不是querySelectorAll来提高性能。不知道，这最终是否比使用quer
浏览 0提问于2019-07-18得票数 6
我有一个带有图像和简短描述的项目列表，我希望在多个行中显示它们，在行中每项具有相同的高度，如果最后一行的项较少，则以相同的间距和对中对齐。
理想情况下，解决方案将是混合网格</
浏览 2提问于2019-10-14得票数 1
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号