介紹：
flex布局，即是flexible box的縮寫，即是「彈性布局」或者「彈性盒模型」。
flex的指定：任何乙個容器都可以指定為flex布局
anycontainer
行內元素也可以指定為flex布局：將display取值改為inline-flex，行內的彈性布局
webkit核心的瀏覽器，必須加上字首才行-webkit-flex；
注意的是：設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。
概念：
設為flex的容器，存在兩根軸，主軸和交叉軸；這兩個軸的方向是水平還是豎直不一定。
主軸，叫main axis（axis 軸，軸線），開始和結束的一頭分別叫main start和main end；
交叉軸，叫cross axis，開始和結束的一頭叫cross start 和 cross end。
外部容器的屬性：
①flex-direction
②flex-wrap
③flex-flow
④justify-content
⑤align-items
⑥align-content
它們分別的意思是：
①flex-direction內部元素的排列方向（橫著排還是豎著排）
flex-direction：row、row-reverse、column、column-reverse
②flex-wrap內部元素太多了，在一條軸線上排不下了，換行嗎？怎麼換行？
flex-wrap：nowrap、wrap、wrap-reverse
nowrap（預設）：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方
③flex-flow：是將①和②合起來簡寫
自然預設的是：flex-flow：row nowrap；
④justify-content：內部元素在主軸上的對齊方式（是都在中間、靠著main start、靠著main end、還是均勻分布）
⑤align-items：內部元素在交叉軸上的對齊方式：
⑥align-content：多跟軸線下這個屬性派上用場，平常一根軸線沒用處。
內部元素的屬性，主要的有下面幾個：
order：專案的排列順序，數字越小越靠前，越大越往後排
flex-grow：放大比例（default：0）
FLEX伸縮布局資料
常見父元素 flex direction 設定主軸方向 justify content 設定主軸上的子元素排列方式 flex wrap 設定子元素是否換行 align items 設定側軸子元素的排列方式 單行 align content 設定側軸子元素的排列方式 多行 flex flow 復合屬性...
flex布局資料不夠時，左對齊
畫頁面上，會經常用到flex布局，也特別的好用。尤其在在數量恰好時，但是後台返回的資料量是不確定的時候，就要考慮到所用的布局方法對不對了，兩種方法可以很好避免數量不夠時問題 1.重點在於最下margin兩行的 可以理解為一行分為四個模組，除了四得倍數之外，都有margin right的值，模組為24...
flex布局的學習總結
前言 因為做任務十涉及到flex布局，所以索性花了乙個上午的時間好好看了一遍。之前也看了，但是沒有做實戰練習，所以很多屬性還是很容易忘記。其實就是熟能生巧的事情啦。以下的所有總結都還未涉及到瀏覽器相容的問題，只針對不同的屬性做介紹。具體的語法介紹可以看阮一峰的教程 簡單總結一下 一 容器的屬性 fl...