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

徐小武發表於2018-04-10

前言

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

Flexbox演示站

大概就是張這個樣子:

Flexbox

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

檢視Flexbox演示站

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

GitHub地址

最後

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

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

相關文章