Flexbox允許您將布局元素定義為可以根據(jù)容器進行調(diào)整的靈活框。因此，您可以決定某個元素應(yīng)占用多少空間，調(diào)整容器大小時應(yīng)移動的位置以及如何相應(yīng)地安排該內(nèi)容。
 

　　如果網(wǎng)站開發(fā)中您從未使用過flexbox屬性，那么它可能會讓您感到困惑。此列表可幫助您了解所有主要的flexbox方法。從那里，您將能夠在您自己的項目中實現(xiàn)這種強大的布局功能。
 

　　Flexbox Froggy

　　我認為這對于那些想要弄臟自己的初學(xué)者來說是最好的教程。Flexbox Froggy是一款免費的開源編碼游戲，您可以在其中學(xué)習flexbox ... froggy的方法。
 

　　你可以在各個層面上進步 - 前幾個很容易。他們介紹了flexbox的絕對基礎(chǔ)知識，并教你基本的屬性。從那里開始，你將經(jīng)歷30多個級別，這些級別變得越來越困難，并將推動你的知識極限。
 

　　即使對于想要回顧一下flexbox可以做什么的有經(jīng)驗的開發(fā)人員來說，這個工具也很棒。如果您需要更具挑戰(zhàn)性的工作，可以跳到后面的課程，因此它非常適合所有開發(fā)人員。
 

　　什么是Flexbox

　　什么是Flexbox？可能聽起來像一個奇怪的瑣事游戲節(jié)目，但它實際上是一個很好的學(xué)習方式。這是由開發(fā)人員Wes Bos開發(fā)的一套免費視頻課程。
 

　　他將向您介紹與Flexbox屬性相關(guān)的所有內(nèi)容，包括調(diào)整容器大小以及如何從頭開始創(chuàng)建完全響應(yīng)的界面。視頻需要注冊電子郵件地址，但課程完全是免費的。最好的部分是這些視頻教授你可以遵循的實際例子來學(xué)習，比如之前分享的《10個用于查找自由紋理的資源》。但我仍然認為最好的學(xué)習方法之一就是建立真正的項目，而這個課程就是這樣做的。
 

　　CSS技巧指南

　　如果您更喜歡書面教程，那么請看一下這個CSS-Tricks指南。從Flexbox的絕對基礎(chǔ)知識開始，它涵蓋了您需要了解的所有內(nèi)容。
 

　　在解釋flexbox術(shù)語，布局和內(nèi)容組織的過程中，您會發(fā)現(xiàn)大量的視覺效果。它不是世界上最好的指南，但對于只想閱讀和學(xué)習的初學(xué)者來說，它可能是最好的。它比大多數(shù)W3規(guī)范文檔更容易使用，并且作為一個很好的起點。
 

　　Flexbox Intro Tut

　　我也非常熱衷于為Interneting Is Hard網(wǎng)站撰寫的本教程。這是一個致力于在線網(wǎng)站開發(fā)教程的網(wǎng)站，其目標是幫助每個人理解編碼。
 

　　每章都有漂亮的圖表，解釋了在學(xué)習HTML和CSS時遇到的語法和術(shù)語。而且我不得不說他們的flexbox內(nèi)容太棒了。
 

　　該指南絕對龐大，超過12章組織在一個頁面上。本教程使用目錄，這很快成為冗長文章的標準。絕對長度可能會讓你一開始拒絕 - 但它真的值得一讀。
 

　　CSS3 Flexbox的可視指南

　　圖形和視覺效果總能比文字更好地解釋。這就是為什么Scotch.io的這本指南是研究flexbox的更好的入門教程之一。
 

　　請注意，這確實使用了大量代碼片段來解釋概念，因此它不僅僅是一個可視化指南。但是還有很多圖形和圖表可供使用。
 

　　如果你想要一個明確的flexbox技術(shù)指南，那么你真的會很喜歡Scotch指南。它確實更傾向于開發(fā)人員，所以如果您已經(jīng)熟悉CSS語法，它確實很有用。
 

　　Flexbox CSS在20分鐘內(nèi)完成

　　我知道很多人通過觀看視頻來學(xué)習更好，而且你可以在YouTube上找到很多。當然，上面的Wes Bos視頻系列也是一個很好的選擇。但是如果你想要快速的東西，可以通過Traversy Media查看這個視頻。
 

　　它只需20分鐘即可完美地解釋flexbox語法。您將更加深入地了解為什么靈活的盒子模型可以如此輕松地替換浮動，以及為什么開發(fā)人員對這種新設(shè)置非常了解。
 

　　使用Flexbox構(gòu)建簡單布局

 

　　為了進入更實用的視頻示例，您可能會喜歡開發(fā)人員Kevin Powell錄制的視頻教程。
 

　　這是一段相當短的視頻，總共只有11分鐘。但在解釋靈活的盒子模型時，它也最直觀和更直接的。
 

　　如果你想要一個可以輕松跟隨的視頻，那么這值得關(guān)注。您不會了解有關(guān)flexbox的所有內(nèi)容，但您將學(xué)到足夠的知識來使用它來進行自定義Web布局。
 

　　使用FlexBox重建Dribbble

　　這可能是我最喜歡的視頻教程之一，因為它教會你如何從頭開始創(chuàng)建一個完整的項目。
 

　　YouTube頻道DevTips創(chuàng)建了這個Dribbble編碼教程，向您展示如何使用CSS flexbox重建整個Dribbble布局。對于想要真正深入了解并了解其工作原理的初學(xué)者，這是我推薦的精確教程類型。
 

　　記住CSS屬性非常棒并且會有所幫助。但是通過這種教程，您將學(xué)習如何從頭開始編寫布局的實用技巧。這就是您可以為每個未來項目帶來的體驗。
 

　　扁平響應(yīng)Flexbox站點

　　我的最后一個選擇是冗長的教程，它也很好地涵蓋了flexbox。在這個視頻中，您將找到一個多小時的指導(dǎo)性指導(dǎo)，用于從頭開始使用flexbox構(gòu)建自定義網(wǎng)站。您將學(xué)習如何編寫網(wǎng)格代碼以及如何設(shè)計整個頁面以實現(xiàn)移動友好。
 

　　但是，這比其他視頻教程要詳細得多。因此，我真的建議您可以稍后觀看此視頻，一旦您了解了這些基礎(chǔ)知識。您將知道它涵蓋了很多CSS flexbox屬性的基礎(chǔ)知識，但它也會很快的移動。
 

　　無論使用哪種方式，這個列表有很多讓你能夠忙碌的東西，并會讓你開始使用flexbox布局。