flexbox布局_Flexbox vs Grid-如何構建最常見HTML布局

flexbox布局

There are so many great CSS resources all over the internet. But what if you just want a simple layout and you want it NOW?

互聯網上有很多很棒CSS資源。但是，如果您只是想要一個簡單的布局而現在就想要呢？

In this article, I describe the 5 most common web page layouts and how to build them using both Flexbox and Grid.

在本文中，我將介紹5種最常見的網頁布局以及如何使用Flexbox和Grid來構建它們。

這將如何工作 (How this will work)

There is a link below every layout for the full HTML and CSS code on CodePen.

每個布局下方都有一個鏈接，用于CodePen上的完整HTML和CSS代碼。

Note that I'm using SASS for composing style definitions, so if you want to do the same on your local, install SASS using:

請注意，我使用SASS來編寫樣式定義，因此，如果要在本地進行相同的操作，請使用以下命令安裝SASS：

npm i sass -g

基本卡模板 (Basic card template)

I used the above card as the base of the web page layout. It's composed of three elements in a vertical direction, so normal div blocks would work well. However, I will later need to make the middle element - the text paragraph - stretch.

我使用以上卡片作為網頁布局的基礎。它由垂直方向上的三個元素組成，因此普通的div塊會很好地工作。但是，稍后我將需要拉伸中間元素(文本段落)。

Here both Flexbox and Grid do the job seamlessly. I prefer Flexbox as it's more straightforward to me.

在這里，Flexbox和Grid都能無縫地完成工作。我更喜歡Flexbox，因為它對我來說更直接。

Winner: Flexbox

獲獎者：Flexbox

CodePen Flexbox, CodePen Grid

CodePen Flexbox ， CodePen網格

Now let's start creating our different layouts.

現在開始創建不同的布局。

1垂直和水平居中卡 (1 Vertically and horizontally centered card)

With Flexbox, we need one element that centers horizontally, and another (the child element) that centers vertically.

使用Flexbox，我們需要一個元素水平居中，另一個(子元素)垂直居中。

The order of items is defined by flex-direction. How the element positions itself in the available space is set by align-self on the element or align-items on its parent.

項目的順序由flex-direction定義。元素如何在可用空間中定位自己是由元素上的align-self或其父元素上的align-items設置的。

With Grid, we need three columns and three rows. Then we position the card in the middle cell.

使用網格，我們需要三列三行。然后，將卡放置在中間單元中。

The horizontal centering is easy. We define three columns and their sizes using grid-template-columns: auto 33% auto as the card should be as wide as 1/3 of the visible area.

水平居中很容易。我們使用grid-template-columns: auto 33% auto定義三列及其大小grid-template-columns: auto 33% auto因為卡片的寬度應為可見區域的1/3。

The problem is, we don't know the vertical dimensions. We want the top and bottom rows to take up the remaining space which is not possible with grid. The card is centered, but its height depends on the height of the window.

問題是，我們不知道垂直尺寸。我們希望最上面和最下面的行占用剩余空間，而網格是不可能的。該卡居中，但其高度取決于窗口的高度。

However, we can solve this with an additional wrapping element around the card and center it using margin.

但是，我們可以通過在卡周圍使用其他包裝元素來解決此問題，并使用margin對其進行居中。

Winner: Flexbox

獲獎者：Flexbox

CodePen Flexbox, CodePen Grid

CodePen Flexbox ， CodePen網格

2兩張卡垂直和水平居中 (2 Two cards vertically and horizontally centered )

Often we need to center more than just one element. These two cards should also maintain the same height if one or the other contains longer text.

通常，我們需要將多個元素居中。如果一個或另一個包含較長的文本，則這兩個卡也應保持相同的高度。

With Flexbox, we need to wrap both cards in another element and use it to center both cards at once.

使用Flexbox，我們需要將兩個卡包裝在另一個元素中，并使用它一次將兩個卡居中。

We can't use align-items here as that applies to the Y-axis in this case. We need to define how the remaining space on the X-axis should be distributed with justify-content: center. That ensures both cards are horizontally centered.

我們不能在這里使用align-items ，因為在這種情況下，它適用于Y軸。我們需要定義如何使用justify-content: center分配X軸上的剩余空間。這樣可以確保兩張卡都水平居中。

If we omit the variable height problem of Grid, we can achieve the same result even without any additional wrapping elements. This time we define grid with five columns with grid-template-columns: auto 33% 50px 33% auto. The rest stays the same as in the previous example.

如果省略Grid的可變高度問題，即使沒有任何其他包裝元素，我們也可以達到相同的結果。這次，我們用五列的grid-template-columns: auto 33% 50px 33% auto定義了grid grid-template-columns: auto 33% 50px 33% auto 。其余部分與前面的示例相同。

Winner: Flexbox

獲獎者：Flexbox

CodePen Flexbox, CodePen Grid

CodePen Flexbox ， CodePen網格

3張相同寬度和高度的卡 (3 Multiple cards with same width and height)

This is another typical use case for blogs, e-commerce sites, or generally any site that displays some kind of listing. We want the cards to have the same width and height. Height needs to be inferred from the greatest element in the list.

這是博客，電子商務網站或通常顯示某種列表的任何網站的另一個典型用例。我們希望卡片具有相同的寬度和高度。需要從列表中最大的元素推斷出高度。

This can be done in Flexbox using flex-wrap: wrap. Elements will wrap to the next line if their width exceeds the remaining space of each line. However, the same height is only preserved in the scope of a single line, unless you define it explicitly.

這可以在Flexbox中完成使用flex-wrap: wrap 。如果元素的寬度超過每行的剩余空間，則它們將換行到下一行。但是，除非明確定義，否則同一高度僅保留在單行范圍內。

Grid shows its true power here. This layout can be created using grid-auto-rows: 1fr which enforces the same height on all rows.

格在這里展示其真正的力量。可以使用grid-auto-rows: 1fr創建此布局，它在所有行上強制使用相同的高度。

Winner: Grid

優勝者：網格

CodePen Flexbox, CodePen Grid

CodePen Flexbox ， CodePen網格

4垂直和水平居中交替顯示文本和圖像 (4 Alternating text and images vertically and horizontally centered)

In this example, we have text with CTA buttons accompanied by an image on the other side. Both components should be vertically centered, as their size can vary.

在此示例中，我們帶有帶有CTA按鈕的文本，另一側帶有圖像。兩個組件都應垂直居中，因為它們的大小可以變化。

This is a piece of cake for Flexbox. Every row is an article element split into two wrapping containers, .img and .content. They are required for even size distribution (flex-basis: 50%).

對于Flexbox來說，這是小菜一碟。每行都是一個article元素，分為兩個包裝容器.img和.content 。它們對于均勻的尺寸分布是必需的( flex-basis: 50% )。

Vertical centering of the inner content is defined by align-items: center.

內部內容的垂直居中由align-items: center定義。

The alternation is achieved by reversing the direction of Flexbox by flex-direction: row-reverse on every odd article.

交替是通過將flexbox的方向通過flex-direction: row-reverse在每個奇數文章上按flex-direction: row-reverse來實現的。

Grid handles this use-case nicely too. We don't need to define one giant grid, but rather one for each article.

格也很好地處理了這個用例。我們不需要定義一個巨型網格，而是為每篇article定義一個。

It defines equally wide columns that are vertically centered using align-items: center.

它定義了使用align-items: center垂直居中的等寬列。

The alternation is defined on the cell-level by switched values for grid-column.

交替是在單元格級別上通過grid-column切換值定義的。

Winner: tie

優勝者：并列

CodePen Flexbox, CodePen Grid

CodePen Flexbox ， CodePen網格

5個帶菜單的水平接頭 (5 Horizontal header with menu)

To achieve this design using Flexbox, both sides of the header need to be represented by a single element.

為了使用Flexbox實現此設計，標頭的兩側都需要由單個元素表示。

The logo and company name form one anchor on the left, and the menu is a single nav element on the right. Flexbox positions them with justify-content: space-between.

徽標和公司名稱在左側形成一個anchor ，菜單在右側是單個nav元素。 Flexbox將它們放置在justify-content: space-between 。

With Grid, we need two columns - one for the logo and the other for the menu. The menu is another grid that distributes the size of columns evenly using grid-template-columns: repeat(4, minmax(0, 1fr)).

對于Grid，我們需要兩列-一列用于徽標，另一列用于菜單。菜單是另一個網格，它使用grid-template-columns: repeat(4, minmax(0, 1fr)) columns均勻地分配列的大小grid-template-columns: repeat(4, minmax(0, 1fr)) 。

The problem here is that if we want to add another item to the menu, we also need to adjust the CSS.

這里的問題是，如果我們想在菜單中添加另一個項目，我們還需要調整CSS。

Winner: Flexbox

獲獎者：Flexbox

CodePen Flexbox, CodePen Grid

CodePen Flexbox ， CodePen網格

最終獲勝者是... (And the winner is...)

The final score is 5:2 in favor of Flexbox, but this does not mean that it becomes the ultimate CSS winner. There are situations when you need to use one or the other, sometimes even both together, to achieve what you need.

最終得分是Flexbox的5：2，但這并不意味著它成為最終CSS贏家。在某些情況下，您需要使用一個或另一個(有時甚至同時使用)來實現所需的功能。

If you need flexible and conditional positioning, use Flexbox. If you want to create listings or similar structures that require equally sized elements or have a table form, use Grid.

如果需要靈活的條件定位，請使用Flexbox。如果要創建需要相等大小的元素或具有表格形式的清單或類似結構，請使用網格。

As a front-end developer, you won't get away with not knowing both.

作為前端開發人員，您將不會一無所知。

Reference guide Flexbox, Reference guide Grid

參考指南Flexbox ，參考指南Grid

P.S. If I missed a layout you use on a daily basis, let me know on Twitter and I'll prepare a sequel :-)

PS：如果我錯過了您每天使用的版式，請在Twitter上告訴我，我將準備續集:-)