目錄
什麼是flex
為什麼用flex
flex-direction
flex-wrap
flex-flow
justify-content
flexiablebox即是彈性盒子，用來進行彈性布局，可以配合rem處理尺寸的適配問題。
作用：子元素在父元素盒子中的排列方式
屬性值作用
row預設值。按從左到右的順序顯示。
row-reverse
與row相同，但是以相反的順序。
column
靈活的專案將垂直顯示，按從上到下的順序。
column-reverse
與column相同，但是以相反的順序。
作用：子元素在父元素盒子中的是否換行（列）
屬性值作用
nowrap
預設值。不換行或不換列。
wrap
換行或換列。
wrap-reverse
換行或換列，但是以相反的順序。
作用：flex-direction和flex-wrap屬性的簡寫形式
語法：flex-flow:||
作用：用來在存在剩餘空間時，設定為間距的方式
屬性值作用
flex-start
預設值。從左到右，挨著行的開頭。
flex-end
從右到左，挨著行的結尾。
center
居中顯示。
space-between
平均分布在該行上，兩邊不留間隔空間。
space-around
平均分布在該行上，兩邊留有一半的間隔空間。
作用：設定每個flex元素在交叉軸上的預設對齊方式。
屬性值作用
flex-start
位於容器的開頭。
flex-end
位於容器的結尾。
center
居中顯示。
css布局 flex 響應式 grid
布局 原始布局方式，利用 的特性展示布局，沒有頁面邏輯且大量冗餘 現在幾乎不用 固定寬 常用960px，移動端縮放表現差，不友好 流式 使用float實現動態浮動，各解析度下樣式無法保證 flex彈性盒子 簡潔且強大，主流使用 css柵格布局 grid 將網頁分成一系列行和列，將對應內容放入對應區域...
響應式布局與彈性布局基礎篇
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用 大勢...
響應式布局的應用
彈性布局 為什麼使用彈性布局 有的 設計還在使用固定寬度 如960px 期望給所有終端使用者帶來較為一致的瀏覽體驗.這種固定寬度設計在筆記本上顯示剛好,而在部分高解析度顯示器上卻會在兩邊多出些空白,這樣的網頁給高解析度使用者的體驗是極差的,而彈性布局剛好解決了這個bug.實現彈性布局的方法 綜合彈性...