案例基礎布局
html
上面我給每個item 都設定了 不同的高度 和 line-height;
可以看到 容器為了讓文字對齊 而調整自己的位置；
align-content
定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
.box
嘗試新增 **
align-content: flex-end;
align-content:space-around;
align-content:space-between;
align-content : center;
可以說，flex布局在父元素上對子元素垂直方向的控制還是非常到位和明確的；
子元素屬性**
order
大概可以理解為子元素的排隊號碼，預設都是0，越大排隊越後；
可以看到，1 號因為 order 設定為10排到了後面； 而2號因為更加大的order 而排到最後。
flex-grow 多餘空間分配比例
它的值是乙個number，預設為0；只要有乙個同軸元素被設定了flex-grow ，所有多餘空間都會按照這個比例分配，並讓元素佔滿整行。這個被分配的空間，是算在自身裡面的；
盒子寬度變大了，（就是grow啦）
如果子元素有margin，那麼會先計算橫排多少個，再決定 flex-grow 分配的空間是多少
例如如下**，
//沒有設定 flex-grow 時
//設定了 flex-grow 時
所以，margin 並不算 多餘空間 ，不會被重新分配；
flex-shrink
此屬性與 flex-grow 有點相反的意思，用於處理 不換行時，內容超出螢幕了，應該決定誰來縮小；
值越大 縮小比例越大；預設是 1
改一下**；
.box
此時 父盒子規定不能換行；但是5個item 寬度已經超過螢幕寬了；此時大家是等比縮小
下面設定1號 flex-shrink：600
可以看到，儘管我把1號設定到縮放非常大了，但是實際寬度並沒有很小；說明瀏覽器會自己決定內容是否已經足夠放下，夠了就停止縮放；
當內容非常多時，1號就明顯被縮放得非常厲害，同時我發現，4號儘管設定200，但是它的大小跟被設為600的 1號是一樣的。
這是因為他們已經縮放到最後只能容納文字的空間了；所以就不會再縮放下去；這跟文字佔位乙個道理
flex-basis
屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
簡單來說，就是這個值會影響瀏覽器計算的輸入值，有四種情況
1，本來就會超出，然後你設定的值比原值低（原值200px每個item），你的元素會被壓縮。
1，本來就會超出，然後你設定的值比原值大，你的元素會被相對放大些。
3 本來不會超出，你設定的值比原來小，你還是會小一點
4 本來不會超出，你設定的值比原來大，你就會更大
這個值你可以當做寬度來看，當設定為 跟原來一樣的值得時候，基本沒有變化
align-self
此子元素單獨設定垂直方向對齊方式；預設auto 表示父親怎麼定義就怎麼來；其他值跟align-items是一樣的
此屬性主要是方便特殊定位 某個字元素
flex屬性
是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.item
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
最後移動端使用flex 布局感覺還是非常給力的，並且通常滿足各個螢幕自適程式設計客棧應的要求；有機會還是要多實踐起來。
本文標題: css flex 彈性布局詳解
本文位址:
CSS Flex彈性布局 筆記
flexbox 是 flexible box 的簡稱 注 意思是 靈活的盒子容器 是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可 地展現出來。它之所以被稱為 flexbox 是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空...
css flex彈性盒模型布局
三 作用在子容器的樣式 flex特性 當多個div子元素寫在父容器，他們會併排在一行，父容器會自動調節子容器大小，使他們併排在一起，但不會容下無限個，會根據子容器中的內容決定，當內容多過父容器的大小時，其他的子容器會溢位在父容器外。這時，可以通過flex wrap對子容器進行換行。當父容器displ...
CSS Flex彈性布局實現Div
前言前端樣式開發時經常會遇到 當子 div 長度大於 父 div 中需要實現換行時，我們採取flex布局解決此問題。如下 div 開啟應用div div div 開啟應用div div div 開啟應用div div div 開啟應用div div div 開啟應用div div div div 樣...