ie盒模型和標準盒模型的區別：兩者的區別在於content的不同，ie盒模型的content包括border、padding
flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。對於ie，其瀏覽器的相容性，flex 只支援 ie 10+
採用 flex 布局的元素，稱為 flex 容器(flex container)，簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案(flex item)，簡稱"專案"。
容器預設存在兩根軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size
flex-direction：主軸的方向。
flex-wrap：超出父容器子容器的排列樣式。
flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式。
justify-content：子容器在主軸的排列方向。
align-items：子容器在交叉軸的排列方向。
align-content：多根軸線的對齊方式。
order：子容器的排列順序
flex-grow：子容器剩餘空間的拉伸比例
flex-shrink：子容器超出空間的壓縮比例
flex-basis：子容器在不伸縮情況下的原始尺寸
flex：子元素的 flex 屬性是 flex-grow,flex-shrink 和 flex-basis 的簡寫
align-self
flex-direction屬性決定主軸的方向(即專案的排列方向)。
.box
row(預設值)：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box
nowrap(預設)：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
.boxjustify-content屬性定義了專案在主軸上的對齊方式; 具體對齊方式與軸的方向有關。下面假設主軸為從左到右
.box
flex-start(預設值)：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
align-items屬性定義專案在交叉軸上如何對齊。
.box
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch(預設值)：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
.box
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(預設值)：軸線佔滿整個交叉軸。
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大
.itemflex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
.itemflex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
.itemflex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選
.item
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
預設布局換行 Flex布局教程
本篇為學習筆記。內容來自網路。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flexbox 是一種一維的布局，是因為乙個 flexbox 一次只能處理乙個維度上的元素布局，一行或者一列...
預設布局換行 Flex布局入門
主要提供簡便 完整 響應式布局解決方法，設定flex布局後元素的 float clear vertical align屬性將失效 flex direaction 決定主軸的方向 引數 row 預設值 主軸為水平方向，起點在左端 row reverse 同上，起點在右端 column 主軸為垂直方向，...
html的幾種布局
1 靜態布局 static layout 即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。優點 這種布局方式對設計師和css編寫者來說都是最簡單的，亦沒有相容性問題。缺點 顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現。當前，大部分門戶 大部分企業的pc宣傳站點都採用了這種布局方式...