拒絕爛大街——Flexbox佈局演示站了解一下

前言

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

Flexbox演示站

大概就是張這個樣子：

1. 點擊設置Flex容器和Flex項目的各個屬性的值以及項目的寬度，右邊實時看到效果初學時更容易理解各個屬性的做用。
2. 友好的提示：初學者不易記全全部的屬性和值的左右，鼠標放在屬性名上便可顯示相應屬性的做用。

查看Flexbox演示站

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

GitHub地址

最後

放上幾個我學Flexbox佈局時看的博客： 阮一峯——Flex 佈局教程：語法篇 阮一峯——Flex 佈局教程：實例篇 經過動圖形象地爲你介紹 flexbox 是如何工做的（一）

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