使用 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>
https://codepen.io/JoeHastings/pen/PeEjjR
最佳答案
Flex 和 Grid 是不同的动物,因此在 flex 中简单的行为可能无法很好地转化为 grid。
flex 元素可以在容器中居中,因为 flex 布局适用于 flex lines . flex 线是一行或一列。
当一个 flex item 被要求在一行/列中居中时,它可以访问整行上的可用空间,从头到尾。
然而,在网格布局中,行和列必须与柔性线没有的东西抗衡:轨道墙(a/k/a 网格线)。例如,在您的代码中有三列。这些列将轨道划分为三个独立的部分,而网格元素被限制在一个部分内。
因此,网格项不能使用关键字对齐属性(例如 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/50234112/