关于小型项目Flexbox导航响应式缩放及Grid末行内容居中的问题

1. Flex导航栏子元素同步等比例缩放方案 #

• 使用clamp函数绑定字体大小到视口单位，无需额外写媒体查询即可实现文本随视口同步缩放，语法为clamp(最小值, 动态值, 最大值)，可以避免字号过大或过小。
• 给所有flex子项设置相同的flex-shrink和flex-grow值，保证所有子项同步收缩/扩展，不会出现单个子项变形的问题。
  示例代码：

.nav_main {
    display: flex;
    margin: 0;
    padding-left: 1rem;
    list-style-type: none;
    /* 字号随视口宽度在0.8rem到1.5rem之间动态变化 */
    font-size: clamp(0.8rem, 2vw, 1.5rem);
}
.nav_main li {
    /* 扩展、收缩比例都为1，基础宽度取内容宽度，实现同步缩放 */
    flex: 1 1 auto;
    padding: 0.4rem;
    /* 可选：避免小屏下文字折行 */
    white-space: nowrap;
}

2. Grid布局最后一行子项居中方案 #

之前设置justify-content: center不生效的原因是grid-template-columns: repeat( auto-fit, minmax(350px, 1fr))会让每列自动拉伸占满剩余空间，没有多余空间用于列的对齐调整，可按以下两种方案修改：

方案1：固定列宽（推荐适合子项不需要拉伸的场景） #

直接将列宽设置为固定值，开启列居中对齐即可：

.blue {
    display: grid;
    /* 列宽固定为需要的最小宽度 */
    grid-template-columns: repeat(auto-fit, 350px);
    grid-gap: 20px;
    padding: 20px;
    /* 所有列整体居中，不足一行的子项自然居中 */
    justify-content: center;
}

方案2：保留子项拉伸能力 #

如果需要子项在空间足够时自动拉伸，可配合justify-items和子项最大宽度实现：

.blue {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 20px;
    padding: 20px;
    /* 子项在各自列内居中 */
    justify-items: center;
}
/* Grid子项添加最大宽度限制 */
.blue .grid-item {
    width: 100%;
    max-width: 350px;
}

内容的提问来源于stack exchange，提问作者user10673486