我正在尝试为我的应用程序导航栏设置css网格布局,但我无法让justify-content属性起作用。在这里,我试图将其设置为中心,但我真正想要的是一个根据可用空间扩展间距的布局。
问题的Fiddle: https://jsfiddle.net/epch33vx/
我的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;
}