box-sizing：content-box；//標準盒模型
標準盒模型總寬度=border2+padding2+content
box-sizing：border-box；//怪異模式
怪異盒模型的總寬度=width+margin(左右)( width已經包含了padding和border值)
flex-direction:row //(預設)主軸為水平方向,起點在左端。
flex-direction:row-reverse //主軸為水平方向,起點在右端
flex-direction:column //使用後會使主軸變為y軸
flex-firection:column-reverse //主軸為垂直方向,起點在下沿。
flex-wrap:nowrap //(預設)不換行
flex-wrap:wrap //換行,第一行在上方
flex-wrap:wrap-reverse //換行,第一行在下方
flex-flow:該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。
flex-flow:值1(主軸方向) 值2(是否換行)
flex-flow:row nowrap //(預設)
justify-content:flex-start //(預設)左對齊
justify-content:flex-end //右對齊
justify-content:center //居中(子元素緊湊居中)
justify-content:space-between; //兩端對齊,專案之間的間隔都相等
justify-content:space-around; //每個專案兩側的間隔相等
align-items:flex-start //與交叉軸的起點對其
align-items:flex-end //與交叉軸的終點即末尾對其
align-items:center //與交叉軸的中點對其
align-items:baseline //項⽬的第⼀⾏⽂字的基線對齊
align-items:stretch //如果項⽬未設定⾼度或設為auto，將佔滿整個容器的⾼度
align-content屬性,緊跟於flex-wrap屬性後,該屬性用於修飾flex-wrap屬性
align-content:flex-start //與交叉軸的起點對齊
align-content:flex-end //與交叉軸的終點對其
align-content:center //與交叉軸的中點對齊
align-content:space-between //與交叉軸兩端對齊，軸線之間的間隔平均分布
align-content:space-around //每根軸線兩側的間隔都相等
align-self:center
//允許單個元素與其他元素有不一樣的對齊方式
//在彈性子元素上使用。覆蓋容器的 align-items 屬性。
order屬性: (自定義子元素的顯示順序)
//用整數值來定義排列順序，數值小的排在前面。可以為負值。
//注: 預設值為0。父元素必須設定為彈性盒模型
align-self:flex-start //預設
align-self:flex-end //終點
flex-grow屬性:(定義彈性盒子元素的擴充套件比率)
//表示的是當容器有多餘的空間時，這些空間在不同條目之間的分配比例
//比如，乙個容器中有 3 個條目，其"flex-grow"屬性的值分別為 1，2 和 3
//那麼當容器中有空白空間時，這 3 個條目所獲得的額外空白空間分別佔
//全部空間的 1/6、1/3 和 1/2
flex-shrink屬性:(定義彈性盒子元素的收縮比率)
//該屬性的值也是無單位的,表示的是當容器的空間不足各個條目的尺寸縮小的比例。
//例如,在容器中有 3 個條目,其"flex-shrink"屬性的值分別為 1，2 和 3。
//每個條目的主軸尺寸均為 200px。當容器的主軸尺寸不足 600px 時,
//比如變成了 540px 之後則需要縮小的尺寸 60px 由 3 個條目按照比例來分配。
//3 個條目分別要縮小 10px、20px 和 30px,
//主軸尺寸分別變為 190px、180px 和 170px
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...
標準盒模型 怪異盒模型
盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...