如何使用 Flexbox 創建現代 CSS 卡片設計佈局

多虧了 Flexbox，CSS3 中的一種新佈局模式，我們可以將所有的卡片排成一行——從字面上看。 卡片設計在過去幾年中越來越受歡迎。 您可能已經註意到，社交媒體網站已經真正接受了卡片。 Pinterest 和 Dribbble 使用卡片佈局來展示信息和視覺效果。 如果你喜歡 Material Design，谷歌的卡片在他們的模式庫中有很好的描述。

我個人喜歡卡片佈局的可讀性和可滾動性。 它們以一種易於瀏覽、滾動和一次掃描的方式呈現完美的信息“爆發”。

如何創建卡片佈局

如果您曾經嘗試過成行的等高內容，您就會知道構建它們並不總是那麼容易。 過去，您可能不得不做很多擺弄才能使其正常工作。 感謝 Flexbox，那些日子已經過去了。 根據您需要提供的瀏覽器支持級別，您可能必須包含一些後備功能，但如今瀏覽器對此功能的支持非常可靠。 為了安全起見，請務必在可信賴的 Can I use 上查看 Flexbox。 請記住，您永遠不應該在您的實時網站上進行更改。 嘗試使用 Local，一個免費的本地 WordPress 開發應用程序。

Flexbox 的基本思想是您可以將容器的 display 屬性設置為flex ，這將“伸縮”其中所有容器的大小。 等高的列以及縮放和收縮選項將簡化如何創建高級佈局。 從卡片開始就像是 Flexbox 備忘單，但是一旦掌握了基礎知識，就可以創建更複雜的佈局。

Flexbox 和多功能性

卡片用途廣泛，具有視覺吸引力，並且易於在大型和小型設備上進行交互，非常適合響應式設計。 每張卡片都充當內容容器，可以輕鬆放大或縮小。 隨著屏幕尺寸變小，它們一行中的卡片數量通常會減少，並且它們開始垂直堆疊。 有額外的靈活性，因為它們可以是固定的或可變的高度。

如何創建佈局

我們將創建一個 Flexbox 卡片佈局，在大屏幕上有一排四個水平容器，在中型屏幕上有兩個，在小設備上有一列。

下面是創建顯示四張卡片的基本佈局的代碼片段。 我不包括內部卡片內容（因為在代碼示例中太長了），所以一定要在裡面放一些入門內容（並且四張卡片的內容量會有所不同）。 此外，此處顯示的是一排四張卡片，但如果您想查看多行內容的行為，可以添加更多卡片。 所有代碼都可以在 Codepen 上找到。

要以網格模式顯示我們的佈局設計，我們需要從外部開始並逐步進入。確保引用正確的容器很重要，否則事情會變得有點混亂。

具有.cards類的部分是我們首先要定位的部分。 容器的 display 屬性是我們需要更改為flex的。

這是您要開始的 HTML：

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

這是開始的CSS：

.cards {
   display: flex;
   justify-content: space-between;
}

彈性屬性

在深入了解之前，最好了解一下 flex 屬性的基礎知識。 flex 屬性指定項目的長度，相對於同一容器內的其他靈活項目。 flex 屬性是flex-grow 、 flex-shrink和flex-basis屬性的簡寫。 默認值為0 1 auto; . 在我看來，充分理解 Flexbox 的最佳方式是使用不同的值，看看會發生什麼。

彈性項目的flex-grow屬性指定項目應佔用彈性容器內的空間量。

flex-shrink屬性指定項目將如何相對於同一容器內的其他靈活項目進行收縮。

flex-basis屬性指定彈性項目的初始主尺寸。 此屬性確定內容框的大小，除非使用 box-sizing 另有指定。 寬度由內容定義時默認為auto，類似於width: auto; . 它將佔用由其自己的內容定義的空間。 如flex-basis: 15em;所示，可以有一個指定的值保持為真。 . 如果該值為 0，則一切都已設置好，因為該項目不會擴展以填充可用空間。

我們從display: flex; 和justify-content: space-between; 在這一點上，事情有點不可預測。 正在使用 Flexbox，儘管它現在還不是很明顯。 有了這個聲明，每個彈性項目都在水平行中彼此相鄰放置。

在 Codepen 上看到這個。

您可能想知道為什麼每個彈性項目都有不同的寬度。 Flexbox 試圖找出每個項目的最小默認寬度是多少。 由於不同的字長和其他設計元素，你最終會得到這些不同大小的盒子。 為了獲得一致的外觀，我們需要做更多的工作。 設置包裝並確定所需的寬度將有助於將它們製成統一的卡片。

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

默認情況下，彈性項目都將嘗試適合一行。 添加flex-wrap: wrap; 使項目相互包裹，因為默認值為全寬。

在 Codepen 上看到這個。

全寬非常適合小型設備，因此在處理各種斷點之前計劃更大的屏幕時，讓我們牢記這一點。 當我們改變寬度時，卡片開始看起來更均勻。

我們現在需要添加.card類來為我們的個人卡片設置樣式。 這可以在.cards樣式下進行。

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

記得之前，flex 屬性是簡寫： flex-grow為 0， flex-shrink為 1， width為 24%。 通過添加指定的寬度，這給了我們一行四行，中間有一些空間。

在 Codepen 上看到這個。

我們將justify-content屬性設置為間距目的。 第一項顯示在最左邊，第二項和第三項顯示在中間，第四項顯示在最右邊。 因為卡片的寬度是 24%，所以還有一些空間，因為我們在 24% 處的四列總和不是 100%。 確切地說，我們還剩下 4%。 這 4% 平均分配在每個項目之間。 所以我們在卡片之間大約有 1.33% 的空間。

在 Codepen 上看到這個。

我們也可以通過使用更精確calc 。 將flex-basis值更改為使用 calc 看起來像這樣：

.card {
	flex: 0 1 calc(25% - 1em);
}

這樣做的好處是瀏覽器會佔用 25% 的空間並從中刪除 1em，這會使卡片稍微小一些。

這是調整可用空間的一種巧妙方法。 1em 在項目之間均勻分佈，我們最終得到了完美的佈局。

直到現在，我們還真的沒有談過太多關於身高的話題。 我添加了另一行卡片來演示高度是如何工作的。 這取決於哪張卡片的內容最多——其他卡片的高度會隨之而來。 因此，每一行內容將具有相同的高度。

這是一個非常“縮小”的視圖，但您會注意到第一行非常高，因為第二張卡片的文本比該行中的其他卡片多。 第二行文本較少，因此總體較短。

適用於小型設備的卡

目前，我們在所有屏幕上都有四列，這並不是最佳實踐。 如果您將瀏覽器窗口縮小，您會看到四張卡片在較小的屏幕上變得更加擠壓，這對於可讀性來說並不理想。 幸運的是，有了媒體查詢，事情會開始變得更好。

要開始解決問題，指定的斷點將確保內容在所有不同的屏幕類型上正確顯示。

以下是將使用的以下斷點（您也可以隨意使用自己的斷點，這些概念仍然適用）：

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

直到現在，它一直在思考。 讓我們進入移動優先的心態，從min-width: 40em斷點開始。

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

通過這些更改，卡片將以全屏寬度顯示，並在任何小於約 640 像素寬的屏幕上堆疊在一起。 如果您將瀏覽器窗口擴展至高於此範圍的任何內容，則返回四列。 這是有道理的，因為min-width為 40em，這是我們創建四張卡片行的地方。

這裡缺少的是中間立場。 對於中檔，連續兩張牌比四張壓扁的牌更具可讀性。 在我們計算出兩張卡片所在的行之前，需要添加另一個媒體查詢來容納最大的屏幕，即四張卡片所在的行。

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

min-width為 60em 的新媒體查詢是聲明四張卡的位置。 40em 的min-width是聲明兩張牌的行的位置。 50% – 1em 的 flex calc值正在發生奇蹟。

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

通過這個簡單的更改，現在一切正常！ 縮小和擴大瀏覽器窗口以確保一切正常。

在 Codepen 上看到這個。

如果您的卡片行看起來正確，那麼您就可以開始了！ 如果您正在嘗試本教程並且最後一行不均勻，請繼續閱讀。

動態內容和最後一行卡片間距

根據您的卡片數量，您可能有也可能沒有愚蠢的最後一行。 如果最後一行已滿或只有一張額外的卡，則不會有問題。 有時您會提前計劃好內容，但如果內容是動態的，那麼最後一行卡片的行為可能與您的預期不同。 如果有不止一張額外的卡片並且設置了對齊內容，它將使它們之間的空間均勻，並且可能不會與上面的行對齊。

要獲得這種外觀，它需要一種不同的思維方式。 我認為這不是那麼有效，但它相對簡單。

.cards和.card樣式是在媒體查詢之外完成的：

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

媒體查詢是確定卡片數量的地方：

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

查看 Codepen 以查看修改後的解決方案。

希望這可以讓您對 Flexbox 概念有一個基本的了解，從而幫助您入門。 Flexbox 有很好的瀏覽器支持，卡片佈局將繼續用於網站設計。 請記住，卡片佈局只是您如何使用 Flexbox 的開始。

下一個：更快地設計 WordPress 網站

在本指南中，我們將介紹如何更快地工作和加快 WordPress 工作流程的技巧。 從最初的站點設置到上線，了解如何從日常工作中減少工作時間！

在這裡下載免費指南！

您還使用 Flexbox 構建了什麼？ 在評論中分享您的項目！