Question

尝试为我的应用导航栏设置css网格布局，但是我无法使justify-content属性生效。在这里，我试图将其设置为居中，但我真正想要的是一个布局，其中排水沟空间根据可用空间扩展。

我的HTML：

<div class='test'>
  <div class='item'>
    1
  </div>
  <div class='item'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
</div>

我的样式表：

.test {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 80px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  justify-items: center;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 56px;
  font-size: 14px;
  text-decoration: none;
}

Answer 1

只需将justify-items: center;替换为justify-content: space-between;

即可

来自the spec（大胆的我的）：

请注意，justify-content和align-content的某些值可以导致轨道间隔开（空间，空间 - ，空间均匀）

.test {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 80px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  justify-content: space-between;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 56px;
  font-size: 14px;
  text-decoration: none;
}

<div class='test'>
  <div class='item'>
    1
  </div>
  <div class='item'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
</div>

Updated fiddle

Answer 2

我会说display: flex; justify-content: center; align-items: center; flex-direction: column;应该进入测试类。

css网格 - 如何在列之间放置相等的空格

2 个答案:

Updated fiddle