content-box
這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
flex容器：採用 flex 布局的元素的父元素；
flex專案：採用 flex 布局的元素的父元素的子元素；
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
flex容器屬性
1、display:flex、inline-flex
注意，設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。
2、flex-direction屬性 決定主軸的方向（即專案的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
3、flex-wrap屬性，定義子元素是否換行顯示
flex-wrap: nowrap | wrap | wrap-reverse;
4、 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap;
5、 justify-content屬性 定義了專案在主軸（）上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
6、align-items屬性定義專案在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch（預設值）;
7、align-content屬性定義了多根軸線的對齊方式。對於單行子元素，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在側軸上執行樣式的時候，會把預設的間距給合併。對於單行子元素，該屬性不起作用
flex專案屬性
1、align-self屬性
internet explorer 和 safari 瀏覽器不支援 align-self 屬性
說明： align-self 屬性規定靈活容器內被選中專案的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
屬性值auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
stretch 元素被拉伸以適應容器。
center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
2、order
說明：
number排序優先順序，數字越大越往後排，預設為0，支援負數。
3、flex
說明：
復合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間
詳細屬性值：
縮寫「flex: 1」, 則其計算值為「1 1 0%」
縮寫「flex: auto」, 則其計算值為「1 1 auto」
flex: none」, 則其計算值為「0 0 auto」
flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值
4、flex-***
flex-grow
乙個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。
flex-shrink
乙個數字，規定專案將相對於其他靈活的專案進行收縮的量。
flex-basis
專案的長度
怪異盒模型和彈性盒子
怪異盒模型 box sizing 屬性值 box sizing content box 常規盒模型 box sizing border box 怪異盒模型 ie盒模型 怪異盒模型 觸發怪異盒模型 box sizing border box 怪異盒模型特點 padding和border都會在元素的寬高...
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...