現在每個網站都需要適應移動裝置。您可以透過使用響應技術來實現這一點，其中一個就需要 CSS flexbox 功能。

　　Flexbox 允許您將佈局元素定義為可以根據容器進行調整的靈活框。因此，您可以決定某個元素應占用多少空間，調整容器大小時應移動的位置以及如何相應地安排該內容。
 
　　如果 WooCommerce 網站開發中您從未使用過 flexbox 屬性，那麼它可能會讓您感到困惑。此列表可幫助您瞭解所有主要的 flexbox 方法。從那裡，您將能夠在您自己的專案中實現這種強大的佈局功能。
 
　　Flexbox Froggy

　　我認為這對於那些想要弄髒自己的初學者來說是最好的教程。 Flexbox Froggy 是一款免費的開源編碼遊戲，您可以在其中學習 flexbox … froggy 的方法。
 
　　您可以在各個層面上進步 – 前幾個很容易。他們介紹了 flexbox 的絕對基礎知識，並教您基本的屬性。從那裡開始，您將經歷 30 多個級別，這些級別變得越來越困難，並將推動您的知識極限。
 
　　即使對於想要回顧一下 flexbox 可以做什麼的有經驗的開發人員來說，這個工具也很棒。如果您需要更具挑戰性的工作，可以跳到後面的課程，因此它非常適合所有開發人員。
 
　　什麼是 Flexbox

　　什麼是 Flexbox？可能聽起來像一個奇怪的瑣事遊戲節目，但它實際上是一個很好的學習方式。這是由開發人員 Wes Bos 開發的一套免費影片課程。
 
　　他將向您介紹與 Flexbox 屬性相關的所有內容，包括調整容器大小以及如何從頭開始建立完全響應的介面。影片需要註冊電子郵件地址，但課程完全是免費的。最好的部分是這些影片教授您可以遵循的實際例子來學習，比如之前分享的《10 個用於查詢自由紋理的資源》。但我仍然認為最好的學習方法之一就是建立真正的專案，而這個課程就是這樣做的。
 
　　CSS 技巧指南

　　如果您更喜歡書面教程，那麼請看一下這個 CSS-Tricks 指南。從 Flexbox 的絕對基礎知識開始，它涵蓋了您需要了解的所有內容。
 
　　在解釋 flexbox 術語，佈局和內容組織的過程中，您會發現大量的視覺效果。它不是世界上最好的指南，但對於只想閱讀和學習的初學者來說，它可能是最好的。它比大多數 W3 規範檔案更容易使用，並且作為一個很好的起點。
 
　　Flexbox Intro Tut

　　我也非常熱衷於為 Interneting Is Hard 網站撰寫的本教程。這是一個致力於線上 WooCommerce 網站開發教程的網站，其目標是幫助每個人理解編碼。
 
　　每章都有漂亮的圖表，解釋了在學習 HTML 和 CSS 時遇到的語法和術語。而且我不得不說他們的 flexbox 內容太棒了。
 
　　該指南絕對龐大，超過 12 章組織在一個頁面上。本教程使用目錄，這很快成為冗長文章的標準。絕對長度可能會讓您一開始拒絕 – 但它真的值得一讀。
 
　　CSS3 Flexbox 的可視指南

　　圖形和視覺效果總能比文字更好地解釋。這就是為什麼 Scotch.io 的這本指南是研究 flexbox 的更好的入門教程之一。
 
　　請注意，這確實使用了大量程式碼片段來解釋概念，因此它不僅僅是一個視覺化指南。但是還有很多圖形和圖表可供使用。
 
　　如果您想要一個明確的 flexbox 技術指南，那麼您真的會很喜歡 Scotch 指南。它確實更傾向於開發人員，所以如果您已經熟悉 CSS 語法，它確實很有用。
 
　　Flexbox CSS 在 20 分鐘內完成

　　我知道很多人透過觀看影片來學習更好，而且您可以在 YouTube 上找到很多。當然，上面的 Wes Bos 影片系列也是一個很好的選擇。但是如果您想要快速的東西，可以透過 Traversy Media 檢視這個影片。
 
　　它只需 20 分鐘即可完美地解釋 flexbox 語法。您將更加深入地瞭解為什麼靈活的盒子模型可以如此輕鬆地替換浮動，以及為什麼開發人員對這種新設定非常瞭解。
 
　　使用 Flexbox 構建簡單佈局

 
　　為了進入更實用的影片示例，您可能會喜歡開發人員 Kevin Powell 錄製的影片教程。
 
　　這是一段相當短的影片，總共只有 11 分鐘。但在解釋靈活的盒子模型時，它也最直觀和更直接的。
 
　　如果您想要一個可以輕鬆跟隨的影片，那麼這值得關注。您不會了解有關 flexbox 的所有內容，但您將學到足夠的知識來使用它來進行自定義 Web 佈局。
 
　　使用 FlexBox 重建 Dribbble

　　這可能是我最喜歡的影片教程之一，因為它教會您如何從頭開始建立一個完整的專案。
 
　　YouTube 頻道 DevTips 建立了這個 Dribbble 編碼教程，向您展示如何使用 CSS flexbox 重建整個 Dribbble 佈局。對於想要真正深入瞭解並瞭解其工作原理的初學者，這是我推薦的精確教程型別。
 
　　記住 CSS 屬性非常棒並且會有所幫助。但是透過這種教程，您將學習如何從頭開始編寫佈局的實用技巧。這就是您可以為每個未來專案帶來的體驗。
 
　　扁平響應 Flexbox 站點

　　我的最後一個選擇是冗長的教程，它也很好地涵蓋了 flexbox 。在這個影片中，您將找到一個多小時的指導性指導，用於從頭開始使用 flexbox 構建自定義網站。您將學習如何編寫網格程式碼以及如何設計整個頁面以實現移動友好。
 
　　但是，這比其他影片教程要詳細得多。因此，我真的建議您可以稍後觀看此影片，一旦您瞭解了這些基礎知識。您將知道它涵蓋了很多 CSS flexbox 屬性的基礎知識，但它也會很快的移動。
 
　　無論使用哪種方式，這個列表有很多讓您能夠忙碌的東西，並會讓您開始使用 flexbox 佈局。