求助：实现报纸版式动态菜单（CSS Flexbox布局问题）

我看了你这个报纸风格动态菜单的问题啦——点击'Bilar'菜单项时，第4个二级菜单项本该向上填充到第一行的空缺位置，结果却向下偏移了。这个问题主要是因为当前布局没有正确利用Flexbox的换行和宽度控制属性，咱们来一步步调整：

问题根源 #

当前二级菜单的容器没有启用Flexbox的换行功能，同时列的宽度设置也不够明确，导致第4个列元素无法自动填充到上一行的剩余空间，只能被挤到下一行。

解决方案 #

我们需要给关键容器添加Flexbox属性，明确列的宽度规则，让布局符合报纸排版的预期：

1. 给二级菜单容器启用Flexbox并允许换行
   给.menu-item-level2添加Flex布局，让子元素可以灵活排布：

   .menu-item-level2 {
     width: 100vw;
     margin: auto;
     display: flex;
     flex-wrap: wrap; /* 允许元素换行 */
     justify-content: flex-start;
   }
   

2. 调整主区域的Flex属性
   让.-level2-main-section占据主要空间，同时内部也启用Flex换行：

   .-level2-main-section {
     padding: 0px;
     background-color: $background-grey-color;
     min-height: 280px;
     flex: 1; /* 占据侧边栏以外的剩余空间 */
     display: flex;
     flex-wrap: wrap;
   }
   

3. 明确二级菜单列的宽度
   给每个.-level2-menu-column设置固定宽度，确保4列能刚好填满一行：

   .-level2-menu-column {
     padding: 0 15px; /* 添加内边距避免内容拥挤 */
     text-align: left;
     flex: 0 0 25%; /* 每列固定占25%宽度，不缩放 */
     box-sizing: border-box; /* 内边距计入宽度，避免撑大容器 */
   }
   

4. 修正主区域行的间距设置
   把.-level2-main-section-row的margin替换为padding，避免Flex布局下的margin冲突：

   .-level2-main-section-row {
     max-width: 100%;
     text-align: center;
     padding: 30px 165px 50px;
     width: 100%;
     box-sizing: border-box;
   }
   

修改后的完整CSS代码 #

$font-stack: OpenSans, Helvetica, sans-serif; 
$primary: #e50000; 
$primary-hover: #ca0000; 
$text-color: #555555; 
$white: #ffffff; 
$graphic-grey-color: #e1e1e1; 
$background-grey-color: #f5f5f5; 
$main-dark-color: #202020; 
$form-border-color: #dddddd; 
$form-active-border-color: #999999; 
$navbar-light-color: $main-dark-color; 
$link-hover-color: $white; 
$link-hover-decoration: none; 
$nav-tabs-link-active-bg: $primary; 
$navbar-brand-padding-y: 0rem; 
$navbar-nav-link-padding-x: 0.9375rem; 
$nav-link-padding-y: 0rem; 

.header-navigation { 
  height: 80px; 
  border-bottom: 2px solid $primary; 

  .header-brand{ 
    margin-right: 1.4375rem; 
    height: 100%; 
  } 
} 

.header-menu{ 
  height: 100%; 
} 

.header-menu-item{ 
  font-family: $font-stack; 
  height: 100%; 
  color: $main-dark-color; 

  &:hover { 
    background-color: $primary; 
  } 

  + .-collapse{ 
    z-index: 1000; 
    display: none; 
    position: absolute; 
    top: 80px; 
    left: 0px; 
    opacity: 0; 

    .menu-item-level2 { 
      width: 100vw; 
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .-level2-main-section{ 
        padding: 0px; 
        background-color: $background-grey-color; 
        min-height: 280px;
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .-level2-main-section-row{ 
          max-width: 100%; 
          text-align: center; 
          padding: 30px 165px 50px;
          width: 100%;
          box-sizing: border-box;

          .-level2-menu-column{ 
            padding: 0 15px; 
            text-align: left; 
            flex: 0 0 25%;
            box-sizing: border-box;

            .-heading{ 
              margin-bottom: 10px; 
              color: $main-dark-color; 
              font-size: 20px; 
              font-weight: bold; 
              line-height: 1.5; 
            } 

            .-subitems{ 
              color: $text-color; 
              font-size: 16px; 
              line-height: 1.88; 
            } 
          } 
        } 
      } 

      .-level2-side-section{ 
        margin: auto; 
        padding: 20px; 
        background-color: $graphic-grey-color; 
        min-height: 280px; 

        .-info{ 
          margin-bottom: 60px; 

          .-info-text{ 
            margin-top: 10px; 
            line-height: 1.5; 
            font-size: 20px; 
            color: $text-color; 
            font-weight: normal; 
          } 
        } 
      } 
    } 
  } 
} 

.header-menu-item.active{ 
  background-color: $primary; 
  color: $white; 

  + .-collapse{ 
    display: block; 
    opacity: 1; 
    transition: opacity 500ms linear; 
  } 
} 

.header-menu-list { 
  height: 100%; 
} 

.navbar{ 
  padding: 0px 0px 0px 30px !important; 
  color: $text-color; 
} 

.header-brandname{ 
  margin: 10px 0px; 
} 

.header-logo{ 
  height: 100%; 
  padding: 0px 30px; 
  border-left: 1px solid $graphic-grey-color; 
}

这样调整后，点击'Bilar'时第4个二级菜单项就会自动填充到第一行的位置，符合你想要的报纸模板布局效果啦～

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