css flexbox模型_Flexbox教程：了解如何使用CSS Flexbox編寫響應式導航欄

css flexbox模型

In this article, I’ll explain how to create a navbar which adapts to various screen sizes using Flexbox along with media queries.

在本文中，我將解釋如何使用Flexbox和媒體查詢來創建適應各種屏幕尺寸的導航欄。

This tutorial can also be found as an interactive screencast in my free Flexbox course at Scrimba.

也可以在我在Scrimba的免費Flexbox課程中以交互式屏幕錄像的形式找到本教程。

To read more about the course, check out this article.

要了解更多有關課程，看看這個文章。

設置 (The setup)

Let’s begin with the markup for a very simple navbar:

讓我們從一個非常簡單的導航欄的標記開始：

<nav>  <ul class="container">  <li>Home</li>  <li>Profile</li>  <li class="search">  <input type="text" class="search-input" placeholder="Search">  </li>  <li>Logout</li>  </ul>  
</nav>

The <ul> element is our flex container and the <li> elements are our flex items. To turn it into a Flexbox layout we’ll do:

<ul>元素是我們的flex容器，而<li>元素是我們的flex項。要將其轉換為Flexbox布局，我們將執行以下操作：

.container {  display: flex;  
}

Which will result in the following layout:

這將導致以下布局：

I’ve added some styling, but that has nothing to do with Flexbox.

我添加了一些樣式，但這與Flexbox無關。

As you can see, we have a bit of extra space on the right-hand side. This is because Flexbox lays out the items going from left to right, and each item is only as wide as its content forces it to be.

如您所見，右側有一些額外的空間。這是因為Flexbox將從左到右排列項目，并且每個項目的寬度僅取決于其內容的大小。

Since the flex container by default is a block level element (and is wider than the four items) we get the gap at the end.

由于默認情況下，flex容器是一個塊級元素(并且比這四個元素還要寬)，因此我們在最后得到了差距。

The reason the search items is wider than the others is because input fields are by default set to size="20", which different browsers and operating systems interpret in different ways.

搜索項之所以比其他項寬，是因為默認情況下將輸入字段設置為size="20" ，不同的瀏覽器和操作系統以不同的方式解釋輸入字段。

響應度1 (Responsiveness 1)

To give our navbar basic responsiveness, we’ll simply give the search item a flex value of 1.

為了使我們的導航欄具有基本的響應能力，我們只需將搜索項的flex值設為1。

.search {  flex: 1;  
}

This results in the search item expanding and shrinking with the width of the container, meaning we won’t get the extra space in the right-hand side.

這導致搜索項隨著容器的寬度而擴大和縮小，這意味著我們將不會在右側獲得額外的空間。

While it makes sense to have the search item grow while the others stay fixed, you could argue that it can become too wide compared to the others. So if you prefer to have all the items grow with the width of the container instead, you can simply give all the items a flex value of 1.

雖然使搜索項增長而其他項保持固定是有意義的，但您可以辯稱，與其他項相比，搜索項可能變得太寬。因此，如果您希望所有項目都隨容器的寬度而增長，則只需將所有項目的flex值設為1。

.container > li {  flex: 1;  
}

Here’s how that plays out:

播放結果如下：

You can also give the items different flex values, which would make them grow with different speeds. Feel free to experiment with that in this Scrimba playground.

您還可以為項目指定不同的flex值，這將使它們以不同的速度增長。可以在此Scrimba游樂場中隨意嘗試。

For the rest of the tutorial, we’ll continue with the first solution, where the search items are the only one with a flex value.

在本教程的其余部分中，我們將繼續第一個解決方案，其中搜索項是唯一具有flex值的項。

響應能力2 (Responsiveness 2)

Our navbar works well on wide screens. However, on more narrow ones it gets into problems, as you can see here:

我們的導航欄可在寬屏幕上正常運行。但是，在更狹窄的范圍內會遇到問題，如您在此處看到的：

At some point, it’s not viable to have all items on the same row, as the container becomes too narrow. To solve this we’ll add a media query where we’ll split our four items into two rows. The media query will kick when the screen is 600px wide:

在某些時候，將所有項目都放在同一行是不可行的，因為容器變得太狹窄。為了解決這個問題，我們將添加一個媒體查詢，將四個項目分為兩行。當屏幕為600像素寬時，媒體查詢將啟動：

@media all and (max-width: 600px) {  .container {  flex-wrap: wrap;  }  .container > li {  flex-basis: 50%;  }}

First, we allow the Flexbox layout to wrap with flex-wrap. This is by default set to nowrap, so we’ll have to change it to wrap.

首先，我們允許Flexbox布局用flex-wrap 。默認情況下，它被設置為nowrap ，因此我們必須對其進行wrap 。

The next thing we do it set the items’ flex-basis value to 50%. This tells Flexbox to make each item take up 50% of the available width, which results in two items per row, like this:

接下來，我們將商品的flex-basis值設置為50％。這告訴Flexbox使每個項目占用可用寬度的50％，這導致每行有兩個項目，如下所示：

Note: I’ve also centred the placeholder text in the search input field.

注意：我還將占位符文本放在搜索輸入字段的中心。

Now we have two different states. However, this layout still doesn’t work on very small screens, like mobile screens in portrait mode.

現在我們有兩個不同的狀態。但是，此布局仍然無法在非常小的屏幕上使用，例如縱向模式下的移動屏幕。

If we continue shrinking the screen, it’ll end up like the image below.

如果我們繼續縮小屏幕，它將最終像下圖所示。

What’s happened here is that the second row can’t fit two items anymore.

這里發生的是第二行不能再容納兩個項目。

The logout and the search items are simply too wide, as you can’t shrink them down to below their minimum width, which is the width they need in order to fill the content inside of them.

注銷和搜索項太寬了，因為您不能將它們縮小到其最小寬度以下，這是它們填充內部內容所需的寬度。

The home and profile items are still able to appear on the same row though, so Flexbox will allow them to do so. This isn’t optimal, as we want all of our rows to behave in the same way.

盡管首頁和個人資料項目仍然可以顯示在同一行中，所以Flexbox允許它們這樣做。這不是最佳選擇，因為我們希望所有行的行為都相同。

響應能力3 (Responsiveness 3)

So as soon as one of the rows can’t fit two items in the width, we want none of the rows to have two items in the width. In other words, on very small screens we’ll actually make navbar vertical. We’ll stack the items on top of each other.

因此，只要其中一行不能容納兩個寬度的項目，我們就不希望任何行具有兩個寬度的項目。換句話說，在很小的屏幕上，我們實際上會將導航欄設置為垂直。我們將各個項目堆疊在一起。

To achieve this we simply need to change our 50% width to 100%, so that each row only fits a single item. We’ll add this breakpoint at 400px.

為此，我們只需要將50％的寬度更改為100％，以便每行僅適合一個項目。我們將在400px處添加此斷點。

@media all and (max-width: 400px) {  .container > li {  flex-basis: 100%;  }  .search {  order: 1;  }  
}

In addition to this, I’d like to place the search item at the bottom, which is why I’m also targeting the search and give it an order value of 1.

除此之外，我想將搜索項放在底部，這就是為什么我也以搜索為目標并為其賦予order值1的原因。

This results in the following:

結果如下：

The reason order: 1; results in the search item being placed at the bottom are because flex items by default have a value of zero, and whatever item has a higher value than that will be placed after the others.

原因order: 1; 之所以將搜索項放置在底部，是因為彈性項默認情況下的值為零，而任何具有比其他項更高的值。

To see how it all plays out, here’s the gif from the top of the article:

要查看其效果如何，請參見文章頂部的gif：

Congrats! You now know how to create a fully responsive navbar using Flexbox and media queries.

恭喜！現在，您知道如何使用Flexbox和媒體查詢創建完全響應的導航欄。

If you’re interested in learning more about Flexbox, I’d recommend you to check out my free course at Scrimba.

如果您有興趣了解有關Flexbox的更多信息，建議您閱讀Scrimba的免費課程。

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

謝謝閱讀！我叫Per Borgen，我是Scrimba的共同創始人–學習編碼的最簡單方法。如果要學習以專業水平構建現代網站，則應查看我們的響應式Web設計新手訓練營。