您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在整个行/列中对齐网格项目(就像弹性项目一样)

在整个行/列中对齐网格项目(就像弹性项目一样)

Flex和Grid是不同的动物,因此在flex中简单的行为可能无法很好地转换为grid。

伸缩项可以跨容器居中,因为伸缩布局可与伸缩线一起使用。伸缩线是行或列。

当要求伸缩项目在行/列中居中时,它可以从头到尾访问整行中的可用空间。

但是,在网格布局中,行和列必须与柔韧性线所不能比拟的: 跟踪墙 (a / k / a网格线)。例如,在您的代码中有三列。这些列将轨道分为三个单独的部分,而网格项目则限制在一个部分中。

因此,由于轨道墙会限制移动,因此无法使用关键字对齐属性(例如justify-contentjustify-self)将网格项自动居中放置在一行上。

可以使网格区域跨越整个行/列,然后清除整个轨道的路径,使网格项可以水平(justify-content: center)或垂直(align-self:center)居中,但是必须明确定义此行为

为了使网格项目在动态布局中跨行居中,容器将仅需要一列(即没有分隔线),或者需要使用_基于行的放置方式_ 将项目显式移动到中心。否则,请使用flex@R_995_2419@。

其他 2022/1/1 18:14:33 有615人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶