介绍
flexbox 和网格布局都是强大的布局。
弹性盒：
flexbox 是一种一维布局模型，最适合在单行或单列中排列元素。当元素的大小或容器的大小未知时，flexbox 特别有用。它非常适合水平和垂直对齐项目，并且对于创建导航栏、侧边栏或工具栏非常有用。
css 网格：
网格是一种二维布局模型，最适合同时将元素排列成行和列。它非常适合创建复杂的布局，并且可以同时处理列和行，这使其成为构建复杂页面布局的不错选择。
网格布局详细
grid-template-columns: repeat(3, 1fr);grid-template-row: repeat(3, auto);grid-column: 1/3grid-row: 1/4
行覆盖
repeat(3, minmax(200px, 1fr)) 语句创建三行（或列，具体取决于使用位置），每行的最小尺寸为 200px，最大尺寸为 1fr。 1fr 单位表示网格容器中可用空间的一小部分。因此，如果容器的大小超过所有行的总最小大小（在本例中为 600px），则剩余空间将在行之间平均分配。
repeat(3, minmax(200px 1fr))
自动调整和自动填充
立即学习“前端免费学习笔记（深入）”；
css 网格中的自动填充和自动调整关键字控制当网格项不占用网格容器中的额外空间时网格的行为方式。
自动填充
.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}
在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配。
自动调整：
这个关键字还告诉网格创建尽可能多的轨道，但它会折叠空轨道，因此网格末尾没有空轨道。
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配，并且任何空列都将被折叠。
子网格
当您希望网格项成为网格容器并与其父网格对齐时，将使用 css 网格布局中的子网格值。
.container { display: grid; grid-template-columns: 1fr 1fr 1fr;}.item { display: grid; grid-template-columns: subgrid;}
注意：-
当您希望嵌套网格与父网格对齐时，这会很有用。但是，子网格并未在所有浏览器中得到广泛支持。
容器查询
集装箱尺寸查询宽度 媒体查询考虑视口宽度但容器大小查询考虑容器宽度容器是被查询的元素。
规则：-
规则仅对容器后代有效而不是容器本身
容器大小查询是响应式设计的补充，而不是媒体查询的替代品。
That's No Moon. It's a Space Station.
At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km).
.card { container-name: card; container-type: inline-size;}@container card (min-width: 200px) { article { background-color: red; }}@container card (min-width: 250px) { article { ... }}That's No Moon. It's a Space Station.
At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km).
以上就是CSS 中的网格和 Flex 布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629803.html
微信扫一扫 
支付宝扫一扫 
