你不知道的flex布局 css3 flex 基礎

ie6混雜模式的盒模型:
css2 的boxwidth = width = border * 2 + padding *2
ie6 的boxWidth = width; contentWidth = width - border *2 - padding * 2
使用ie6混雜模型(怪異模型)  box-sizing: border-box
ie6的解決問題: 在定寬的盒子裡面,放一個100%的input的框,因為input自帶2px的border,會超出父級寬度

overflow: 在overflow-x 或者overflow-y 隻要一個方向設定了一個值不是visible,另一個方向的值就會變成auto

resize: 可以改變水準或者垂直的框的大小, 一般與overflow 一起使用

flex布局: 彈性盒子  display: flex 都是設定在父級盒子裡面
flex-direction :盒子的主軸方向(預設row),有 row(自左向右) column(自上向下) row-reverse(自右向左) column-reverse(自下向上)
flex-wrap: 盒子是否換行(預設no-wrap), 有wrap (換行) no-wrap(不換行) wrap-reverse(倒着換行)
justify-content: 基于主軸的對齊方式(預設 flex-start) 有flex-start (預設對齊) flex-end(向右對齊) center(居中) space-between(兩邊對齊,中間自适應) space-around(元素兩邊的空隙相等)
align-items:基于垂直軸(交叉軸)的對齊方式,主要對于單行進行處理 (預設 stretch) stretch(沒有設定高度,自動撐開到父級的高度) flex-start(開始位置) flex-end(最後的位置) center(居中)  baseline(文字底線對齊)
align-content: 基于垂直的對齊方式,主要用于多行元素進行對齊 (預設 stretch) 有 stretch(沒有設定高度,自動撐開到父級的高度) flex-start(其實方向連續對齊)  flex-end(末尾對齊,沒有縫隙)  center(中間) space-bewteen(上下占領,中間平局配置設定) space-around(所有元素平均配置設定距離)


flex單行對齊方式: align-items: center, justify-content: center
flex多行對齊方式: align-content: center

flex 設定到子級的屬性
order: 誰小誰在前面,預設值為(0) 一般填寫負值
align-self: 子項設定自己的垂直排列方式, 高于父級設定的 有stretch(沒有設定高度,自動撐開到父級的高度) flex-start(開始位置) flex-end(最後的位置) center(居中)  baseline(文字底線對齊)
注意; 優先級align-content > align-self > align-items,


// 彈性盒子的彈性: 子項中填寫 flex: 1 1 auto 三個參數如下面三個， flex-grow flex-shrink flex-basis
flex-grow: 伸 預設(0) 當以一行還有剩餘空間,按照子項設定的flex-grow的值的比列來瓜分剩餘的空間
flex-shrink: 預設（1）縮 每個元素的寬度相等時候, 當一行空間不足時候,啟動縮,按flex-shrink 裡面的值的比列來縮 , 寬度不相同時候,壓縮算法: 
1.先計算所有盒子的權重值(每個盒子的寬度 * 需要壓縮的比列 的和)
2.求每個盒子需要壓縮的值, (每個盒子的寬度 * 需要壓縮的比列 / 權重值 ) * 需要壓縮的大小 得出的就是需要壓縮的大小

flex-basis:預設auto,使用width   用來取代width,


flex-shrink： 在壓縮中不管有沒有設定boder-sizing:boder-box,裡面的寬度是内容區的真實寬度，padding 或者border是不能被壓縮的

flex-basis 與 width 的關系與差別： 
1.不設定width,而設定flex-basis的話，代表元素的最小寬度值就是flex-basis裡面設定的值
2.設定了width, flex-width兩者都且width 的值大于 flex-basis的值 的話，flex-basis為撐開的最小寬度，width裡面的值為可以撐開的最大上限
3.如果英文不換行，撐開容器不會參與壓縮，使用word-break: wrap

inline-flex: 行級彈性盒子,不怎麼使用

flex的應用：
1.居中方式： 父級設定display：flex ，水準居中：justify-content: center, align-items: center, 無論盒子怎麼移動，都會居中
2. 可動态添加的導航欄，
3.等分布局 寫幾個div, 父級flex布局， 子項felx-grow: 1
4.流式布局 align-content: flex-start
5.聖杯布局