如何使導航項適應小屏幕尺寸

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 也允許這樣做。 請在答案中添加您真正想看到的內容。