使用 flex 容器和 flex-wrap: wrap
集,您可以使用 justify-content: center
将溢出的元素对齐到中心。
有没有办法使用 CSS 网格为溢出的网格项实现相同的行为?
我创建了一支笔来显示所需的 flex 行为
.container-flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container-flex .item {
width: 33.33%;
background: green;
border: 1px solid;
}
.container-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container-grid .item {
background: red;
border: 1px solid;
}
* {
box-sizing: border-box;
}
<h3>Flex</h3>
<div class="container-flex">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>Grid</h3>
<div class="container-grid">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
最佳答案
Flex 和 Grid 是不同的动物,因此 flex 中的简单行为可能无法很好地转化为 grid。
flex 元素可以跨容器居中,因为 flex 布局适用于 flex lines . flex 线是不相交的行或列。
当要求 flex 元素在 flex 行居中时,它可以访问整行的可用空间。这使得居中简单易行。
然而,在网格布局中,存在轨道,它们相交 行和列。例如,在您的布局中有三列。这些列横跨行,将其分为三个独立的部分,网格元素被限制在一个部分中。
因此,网格项不能使用关键字对齐属性(例如 justify-content
或 justify-self
)自动居中于行,因为相交的轨道限制了移动.
可以使网格区域跨越整个行/列,然后在整个轨道上扫清道路,允许网格元素水平居中(justify-content: center
)或垂直(align-self: center
),但是 this behavior must be explicitly defined .
要使网格元素在动态布局中跨行居中,容器将只需要一列,或者需要使用类似 line-based placement 的方式将元素显式移动到中心。 .否则,使用 flexbox。
关于css - 在整个行/列中对齐网格元素(就像 flex 元素一样),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50386440/