如何对具有不同大小项目的网格使用"flex“和"gap”？(gap不工作)
对于具有不同大小项目的网格，可以使用"flex"和"gap"来实现灵活的布局。"flex"是一种弹性布局模型，可以根据容器的大小和项目的需求自动调整项目的大小和位置。"gap"是一种用于设置项目之间间隔的属性。
首先，确保你的网格容器具有"display: grid"的样式属性，这将启用网格布局。然后，可以使用"grid-template-columns"和"grid-template-rows"属性来定义网格的列和行。
例如，如果你想创建一个具有不同大小项目的网格，可以使用"fr"单位来定义列的大小。"fr"单位表示剩余空间的比例，可以根据需要进行调整。例如，"grid-template-columns: 1fr 2fr 1fr;"将创建一个具有三列的网格，其中第二列的宽度是第一列和第三列的两倍。
接下来，可以使用"flex"属性来控制项目在网格单元格中的布局。通过将"flex"属性设置为一个非零值，可以使项目具有弹性，并根据需要进行拉伸或收缩。例如，"flex: 1;"将使项目在可用空间内均匀分布。
最后，可以使用"gap"属性来设置项目之间的间隔。"gap"属性接受一个长度值，用于定义项目之间的间距。例如，"gap: 10px;"将在项目之间创建一个10像素的间隔。
如果在使用"gap"属性时遇到问题，可能是因为浏览器不支持该属性。在这种情况下，可以尝试使用"margin"属性来手动设置项目之间的间隔。
总结起来，使用"flex"和"gap"属性可以实现对具有不同大小项目的网格进行灵活布局。"flex"属性用于控制项目的弹性布局，"gap"属性用于设置项目之间的间隔。通过合理使用这两个属性，可以实现各种不同大小项目的网格布局。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关·内容
{ 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
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
