如何使导航项适应小屏幕尺寸

Question

我正在尝试使导航项适应较小的屏幕。 我试图给父元素 max-width 100% 但它不起作用。 它仅在我打开 display: flex 时有效； 离开。 我需要导航项受父宽度限制。

我有以下代码：

HTML

<nav class="tabs">
    <li>
        <a href="#" class="tab active">
            All
            <span class="badge grey">151</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Started
            <span class="badge grey">128</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            On Hold
            <span class="badge grey">15</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Completed
            <span class="badge grey">8</span>
        </a>
    </li>
</nav>

CSS：

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--color-border);
      gap: 1.5rem;
      flex-wrap: nowrap;
      overflow-x: auto;
    }
    
    .tabs > * {
      flex-shrink: 0;
    }
    
    .tabs .tab {
      padding: 1rem 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    
    .tabs .tab.active {
      color: var(--color-heading);
    }
    
    .tabs .tab.active::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: var(--color-primary);
      position: absolute;
      bottom: 0;
      border-radius: 2px 2px 0 0;
    }

因此，在此图像中，您可能会看到我试图实现但没有关闭 flex 的结果：

Answer 1

您应该尝试使用@media (max-width: ...)并减少padding 、 font-size等以获得想要的结果

Answer 2

flex 将强制所有元素位于同一行。 您可以使用flex-wrap让项目可选 go 到下一行。

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 1.5rem;
- flex-wrap: nowrap;
+ flex-wrap: wrap;
  overflow-x: auto;
}

您还可以选择有选择地设置flex-direction: column for small screens using MichaelLearner's answer。

Answer 3

假设您希望弹性项目在大屏幕上以不同于在小屏幕上的方式显示，请考虑将框的方向从行更改（默认为列：

桌面：

.tabs { /* for desktop monitors with lots of with */
  display: flex;
  flex-direction: row;  
}

移动的：

.tabs { /* for thin tall mobile phones */
  display: flex;
  flex-direction: column;  
}

 .tabs { display: flex; flex-direction: column; /* setting this to row or column will change the flow of boxes */ border-bottom: 1px solid var(--color-border); gap: 1.5rem; flex-wrap: nowrap; overflow-x: auto; }.tabs > * { flex-shrink: 0; }.tabs.tab { padding: 1rem 0; display: flex; align-items: center; gap: 0.5rem; position: relative; }.tabs.tab.active { color: var(--color-heading); }.tabs.tab.active::after { content: ""; width: 100%; height: 2px; background-color: var(--color-primary); position: absolute; bottom: 0; border-radius: 2px 2px 0 0; }

 <nav class="tabs"> <li> <a href="#" class="tab active"> All <span class="badge grey">151</span> </a> </li> <li> <a href="#" class="tab"> Started <span class="badge grey">128</span> </a> </li> <li> <a href="#" class="tab"> On Hold <span class="badge grey">15</span> </a> </li> <li> <a href="#" class="tab"> Completed <span class="badge grey">8</span> </a> </li> </nav>

附言。 看来您正在尝试插入图像？ （第一行）请再次复制粘贴，直接进入编辑器。 Stack Overflow 也允许这样做。 请在答案中添加您真正想看到的内容。