前言

最近學到Flexbox佈局，當時就感覺真是一個佈局的神器。終於擺脫了利用各種定位浮動佈局的日子。想寫文章總結一下吧，發現介紹Flexbox佈局類的文章都被寫爛了，各種大神寫的也是生動形象，單單寫一個佈局用法感覺除了自己記錄方便本地查並沒有什麼意義，於是就想到了之前在一個視訊中看到了這樣的網站，但是那個網址我當時打不開就產生了自己也寫一個的想法。既能自己鞏固還能給初學者使用。

Flexbox演示站

大概就是張這個樣子：

1. 點選設定Flex容器和Flex專案的各個屬性的值以及專案的寬度，右邊實時看到效果初學時更容易理解各個屬性的作用。
2. 友好的提示：初學者不易記全所有的屬性和值的左右，滑鼠放在屬性名上即可顯示相應屬性的作用。

檢視Flexbox演示站

只是簡單了寫了幾個響應式CSS，移動端看的效果可能不是太好，建議PC端食用

GitHub地址

最後

放上幾個我學Flexbox佈局時看的部落格： 阮一峰——Flex 佈局教程：語法篇 阮一峰——Flex 佈局教程：例項篇 通過動圖形象地為你介紹 flexbox 是如何工作的（一）

最後的最後，厚顏無恥求Star（逃） 如果恰好你正在學Flexbox，這個小網站對你有那麼一點兒幫助給我點一個Star吧