flex彈性布局：為適應各種型別、尺寸及各種解析度的裝置
瀏覽器相容性：2023年9月版本display:flxe|inline-flex;相容ie11+、firefox、chrome、safari以及移動端，ios7.1-8.4需要加字首-webkit。
//同block和inline,以下學名：塊級伸縮容器和內聯伸縮容器
display
:flex | inline-flex;
// 以下六種屬性應用於彈性容器（flex-content）上
// 一、採用彈性布局
display:flex;
// 二、伸縮流方向 預設row:主軸為水平方向，row-reverse:主軸為水平反向，column：主軸為垂直方向，column-reverse：垂直反向
flex-direction:row;
// 三、指定flex-item若溢位容器是是否換行 預設nowrap，wrap：換行，wrap-reverse：反轉換行
flex-wrap:wrap;
//以上兩種屬性可簡寫
flex-flow:row wrap;
//影響伸縮流方向的因素還有兩個屬性
direction：ltr 同row | rtl 同row-reverse
| inhert;
writing-mode:horizontal-tb 同row | vertical-rl 同column| vertical-lr同column ;
//四、彈性子元素主軸對齊 預設flex-start:第乙個子元素與主軸對齊，flex-end:最後乙個子元素與主軸對齊，center：居中對齊，子元素向主軸中心靠齊且兩邊空白相同，space-between：兩端對齊，第乙個子元素靠齊左邊，最後乙個子元素靠齊右邊，其他中間均勻分布且相鄰元素間空白相同，space-around：擴散對齊，兩端空白等於元素間空白的1/2
justify-content：flex-start;
//五、彈性子元素交叉軸對齊 預設stretch:子元素盡可能的佔滿空間，flex-start:子元素與交叉軸起始位置對齊，flex-end:子元素與交叉軸結束位置對齊，center：居中對齊，子元素向交叉軸中心靠齊且兩邊空白相同，baseline：例項，基準線對齊
align-items:flex-start; //width、height屬性優先順序交於此屬性
//六、交叉軸空白處理 預設:stetch，flex-start/flex-end/center/space-between/space-around，類似於justify-content
align-content:flex-start; //只有在flex-wrap屬性且子元素存在多行時生效
//以下六種屬性應用與彈性子元素（flex-item）上
//一、order屬性：預設為0，顯示順序，兼顧頁面樣式和可訪問性，可以單獨將想要的布局到前面，數字越小越靠前，整數
flex-item:last-child
//二、flex-grow屬性：擴充套件比率，分配剩餘空間
flex-item:first-child
//三、flex-shrink屬性:收縮比率，當所有子元素填滿整個容器時生效
flex-item:first-child
//四、flex-basis屬性：伸縮基準線，子元素在主軸方向的初始大小。若值為0，分配所有空間，若值為auto，則其初始大小為設定寬度（內容寬度），再分配剩餘空間
flex-item:first-child
//五、flex屬性（以上三種屬性的縮寫）：伸縮性:flex-grow flex-shrink flex-basis;當flex為關鍵字none或存在auto時，flex-basis為auto；若flex只有數字值，則flex-basis為0%
flex-item:last-child //flex:0 0 auto; 寬度為原始寬度，不發生擴充套件或伸縮
flex-item:last-child //flex:1 1 auto; 除原始寬度外，同時分配剩餘空間
flex-item:last-child //flex:0 1 0%; 收縮到最小寬度
flex-item:last-child //flex:1 1 0%;分配所有寬度
flex-item:last-child //flex:0 1 auto; 除原始寬度外，同時分配剩餘空間（只收縮，不擴充套件）
flex-item:last-child //flex:0 1 0%; 收縮到最小寬度
//六、align-self屬性：單個子元素在交叉軸的對齊方式，優先於彈性容器屬性align-items，類似於繼承了align-items的值，若單獨設定，則級別優先於繼承,預設auto|flex-start|flex-end|baseline|strecth|center
flex-item:last-chil
css3 彈性盒模型
1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定，兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...
CSS3彈性盒模型
一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...
Css3彈性盒模型
css3引入了新的盒模型 彈性盒模型，該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似，其它語言也使用相同的盒模型，如xaml gladexml。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...