css3彈性盒子(flexible box或flexbox)，是一種用於在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可**地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。 ----摘自mdn 使用css彈性盒子水平的主軸（main axis）的開始位置（與左邊邊框的交叉點）叫做
main start，結束位置叫做main end；垂直的側軸（cross axis）的開始位置叫做
cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做
main size，佔據的側軸空間叫做cross size。容器盒子上的屬性
決定容器內專案的排列方向，即main axis方向，通俗的就是橫或豎flex-directionflex-wrap
flex-flow
justify-content
align-items
align-content
row水平排列，起點（main start）在左端
row-reverse
水平排列，起點（main start）在右端
column
垂直排列，起點（main start）在上端
column-reverse
垂直排列，起點（main start）在下端
決定容器內專案是否換行
nowrap
不換行wrap
換行，第一行在上方
wrap-reverse
換行，第一行在下方
flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
容器內專案在主軸方向的對齊方式
flex-start
左對齊flex-end
右對齊center
居中space-between
兩端對齊，專案之間的間隔都相等
space-around
每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍
容器內專案在側軸方向對齊方式
flex-start
側軸頂端
flex-end
側軸底端對齊
center
居中，中點對齊
baseline
專案的第一行文字的基線對齊
stretch（預設值）
如果專案未設定高度或設為auto，將佔滿整個容器的高度
設定專案多根軸線對齊方式
flex-start
側軸頂端
flex-end
側軸底端對齊
center
居中，中點對齊
space-between
與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around
每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）
軸線佔滿整個交叉軸
容器內專案屬性
定義專案的排列順序。數值越小，排列越靠前，屬性值為number型別，預設為0orderflex-grow
flex-shrink
flex-basis
flex
align-self
定義專案的放大比例，屬性值為number型別，預設是0，即如果存在剩餘空間，也不放大
定義專案的縮小比例，預設是1，即空間布局，該專案將縮小。若乙個專案flex-shrink屬性為0，其他都為1，則空間不足時，設為0的不縮小（補充：只有元素寬度和大於父元素寬度時才會縮小）。
定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為
auto，即專案的本來大小。flex-grow， flex-shrink 和 flex-basis的簡寫，預設值為
0 1 auto。後兩個屬性可選定義單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。.item//設定容器排列方向
.flex.flex_reverse
//設定容器內專案flex放大比例
.flex-items
flex 布局教程
使用 css 彈性盒子
flexbox布局相容性寫法
flex布局 彈性盒子
1.display flex inline flex 子元素的float clear和vertical align屬性將失效。flex direction 主軸的方向即專案排列方向 預設row flex wrap 軸線排不下，如何換行 flex flow 預設值為row nowrap justify...
彈性盒子布局 flex布局
彈性盒子布局方式 box 設為flex布局後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 容器...
flex彈性盒子,,彈性盒子布局
flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...