- 盒模型?共有兩種模式，?種是標準模式，另?種就是怪異 模式
標準模式：盒子總寬度/高度=width/height+padding+border+margin
怪異模式：盒?總寬度/?度=width/height + margin = 內(nèi)容 區(qū)寬度/?度 + padding + border + margin;
- box-sizing有兩個值content-box 和 border-box .
box-sizing:content-box：將采?標準模式解析計 算宫静，也是默認模式；
box-sizing:border-box：將采?怪異模式解析計算；
彈性盒
彈性盒?是 CSS3 的?種新的布局模式。又叫伸縮盒模型（Flexible Box）
最新版flex兼容
Chrome 加前綴 -webkit-flex
Firefox 加前綴 -moz-flex
IE 加前綴 -ms-flex
Opera 加前綴 -o-flex
標準 flex
flex整體介紹
- 容器默認存在兩根軸：?平的主軸（main axis）和垂直的交叉軸 （cross axis）逻族。
- 主軸的開始位置叫做main start，結(jié)束位置叫做main end骄崩；
- 交叉軸的開始位置叫做cross start聘鳞，結(jié)束位置叫做cross end。
- 項?默認沿主軸排列要拂。單個項?占據(jù)的主軸空間叫做main size抠璃，占據(jù) 的交叉軸空間叫做cross size。
彈性盒的基本屬性
- 彈性盒?由彈性容器和彈性?元素組成脱惰。
彈性容器通過設(shè)置 display 屬性的值為 flex(塊元素布局) 或 inline-flex(?內(nèi)元素布局)將其定義為彈性容器搏嗡。
-
flex-direction 屬性決定主軸的?向（即項?的排列?向）。
- row（默認值）：主軸為?平?向拉一，起點在左端彻况。
- row-reverse：主軸為?平?向，起點在右端舅踪。
- column：主軸為垂直?向，起點在上沿良蛮。
- column-reverse：主軸為垂直?向抽碌，起點在下沿。
-
flex-wrap 屬性定義决瞳，如果?條軸線排不下货徙，如何換?。
- nowrap（默認）：不換?皮胡。
- wrap：換?痴颊，第??在上?。
- wrap-reverse：換?屡贺，第??在下?蠢棱。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫 形式锌杀，默認值為row nowrap。
-
justify-content 屬性 定義了項?在主軸上的對齊?式,具體對齊?式與軸的?向有關(guān)泻仙。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊糕再， 項?之間的間隔都相等。
- space-around：每個項?兩側(cè)的間隔相等玉转。所以突想，項?之間的間隔?項?與 邊框的間隔??倍。
-
align-items 屬性 定義項?在交叉軸上如何對齊,具體的對齊?式與交叉軸的?向有關(guān)
- flex-start：交叉軸的起點對齊究抓。
- flex-end：交叉軸的終點對齊猾担。
- center：交叉軸的中點對齊。
- baseline: 項?的第???字的基線對齊刺下。
- stretch（默認值）：如果項?未設(shè)置?度或設(shè)為auto绑嘹，將占滿整個容器的? 度。
-
align-content 屬性 ?于修改 flex-wrap 屬性的?為怠李。類似于 align-items, 但它不是設(shè)置彈性? 元素的對齊圾叼，?是設(shè)置各個?的對齊。
- flex-start：與交叉軸的起點對齊捺癞。
- flex-end：與交叉軸的終點對齊夷蚊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊髓介，軸線之間的間隔平均分布惕鼓。
- space-around：每根軸線兩側(cè)的間隔都相等。所以唐础，軸線之間的間隔?軸 線與邊框的間隔??倍箱歧。
- stretch（默認值）：軸線占滿整個交叉軸。
容器中的條目
除了彈性盒布局模型中的容器之外一膨，容器中的條目也可以通過 CSS 屬性來改變其布局行為呀邢。
條目的順序
order：自定義子元素的顯示順序值，越小越靠前條目尺寸的彈性
彈性盒布局模型的核心在于容器中條目的尺寸是彈性的豹绪。容器可以根據(jù)本身尺寸的大小來動態(tài)地調(diào)整條目的尺寸价淌。當容器中有空白空間時，條目可以擴展尺寸以占據(jù)額外的空白空間瞒津；當容器中的空間不足時蝉衣，條目可以縮小尺寸以防止超出容器范圍。
條目尺寸的彈性由 2 個 CSS 屬性來確定巷蚪，分別是"flex-grow"和"flex-shrink"病毡。
[ flex-grow ]：定義彈性盒?元素的擴展?率。他的值是一個沒有單位的非負數(shù)屁柏，默認值是 1啦膜。
[ flex-shrink ]：定義彈性盒?元素的收縮?率有送。
