CSS Flexbox实现移动端导航栏布局切换无效问题求助

核心问题点 #

• 媒体查询内flex-direction仍设置为row，和桌面端flex容器默认的排列方向完全一致，所以移动端不会出现布局变化，要实现列布局需要修改为column
• 存在属性误用问题：flex-grow的合法值为纯数字（代表剩余空间的分配比例），不能填写2rem这类长度单位；且flex-grow、flex-basis都是作用于flex子项的属性，写在父容器.container上不会生效，你当前的导航栏需求也不需要用到这两个属性

修改后可运行代码 #

.container {
    display: flex;
    color: white;
    justify-content: flex-end;
}

.box {
    width: 90px;
    height: 3rem;
    margin: 0.5rem;
    background-color: black;
    text-align: center;
}

.box-four {
    width: 100px;
}

@media screen and (max-width: 600px) {
   .container {
       flex-direction: column;
       justify-content: center;
       align-items: center; /* 可选，添加后可让列布局下的导航项水平居中 */
       flex-wrap: wrap;
   }
}

内容的提问来源于stack exchange，提问作者Nada El maliki