有时,你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小,在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着 列轴线(column axis) 对齐网格(相反的属性是 justify-content ,沿着行轴线对齐网格)。

  • start:将网格对齐到 网格容器(grid container) 的顶部
  • end:将网格对齐到 网格容器 的底部
  • center:将网格对齐到 网格容器 的中间(垂直居中)
  • stretch:调整 网格项(grid items) 的高度,允许该网格填充满整个 网格容器 的高度
  • space-around:在每个网格项之间放置一个均匀的空间,上下两端放置一半的空间
  • space-between:在每个网格项之间放置一个均匀的空间,上下两端没有空间
  • space-evenly:在每个栅格项目之间放置一个均匀的空间,上下两端放置一个均匀的空间
.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}


.container {
  align-content: start; 
}

.container {
  align-content: end;   
}

.container {
  align-content: center;    
}

.container {
  align-content: stretch;   
}

.container {
  align-content: space-around;  
}

.container {
  align-content: space-between; 
}

.container {
  align-content: space-evenly;  
}

results matching ""

    No results matching ""