css display：flex和justify-content的等价物：网格中心[重复]

omqzjyyz 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(107)

此问题在此处已有答案：

Aligning grid items across the entire row/column (like flex items can)（3个答案）
Areas covered by Flexbox which are difficult or impossible to achieve with Grid（3个答案）
昨天关门了。
我有一个有n个（可以是不同的数字）子元素的div。我想将它们显示在一行中并水平居中。
在Flex中，我会这样做：

display: flex;
justify-content: center;

怎么可能用网格而不用flex呢？
x一个一个一个一个x一个一个二个x

css

来源：https://stackoverflow.com/questions/75816584/equivalent-of-displayflex-and-justify-content-center-in-grid

1条答案

按热度按时间

o8x7eapl1#

下面是一行中的所有元素，居中：

.a {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.b {
  display: grid;
  justify-items: center;
  gap: 20px;
  grid-auto-columns: 1fr;
  grid-auto-flow:column;
}

<div class="b">
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
</div>

**更新：**您可以使用'container'元素来居中网格。

一个二个一个一个

赞(0）回复(0）举报 2023-03-24

我来回答

css display：flex和justify-content的等价物：网格中心[重复]

1条答案

相关问题

热门标签

最新问答