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

前言

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

Flexbox演示站

大概就是張這個樣子:
Flexboxgit

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

查看Flexbox演示站github

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

GitHub地址佈局

最後

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

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

相關文章
相關標籤/搜索