对这个小项目有两个问题，一个关于Flexbox，另一个关于Grid

Question

https://xvicissitudex.github.io/Basic_Website_Template/

导航栏使用的Flex Box。然而，我希望它在收缩时更具响应性，尤其是文本。为了得到响应，我添加了一个600px的媒体查询。

`nav_main {
display: flex;
margin: 0px;
padding-left: 1rem;
list-style-type: none;
}
@media only screen and (max-width: 600px) {
.nav_main {
font-size: 1.2rem;
}
li {
padding: .4rem;
}
} 
` 

但是，还有其他方法可以让flex子对象沿着视口收缩吗？我尝试了弹性收缩特性，但只有当你希望一个弹性项目比其他项目收缩得更多时，这才有效，而不是当你希望它们一起收缩时。

蓝色背景设置有网格：

`.blue {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}`  

我的问题是，一旦网格项被向下推到第二行，我如何将内容居中。例如在24〃；动机第一行有5个网格项，第二行有3个。我想坐在第二排的中间。证明内容的合理性：中心什么都不做。

谢谢你的帮助。

Answer 1

我不确定你的第一个问题。

但对于第二个，你可以在这个网站上找到很好的解释-https://css-irl.info/controlling-leftover-grid-items/