CSS3 彈性盒子

關於盒子，我們都知道是用來存放元素的一種盒子模型，盒子模型又分為w3c盒子模型和ie怪異盒子模型，

那麼這個彈性盒子flex又是個什麼東西呢？

彈性盒子就是可以根據盒子 的大小自適應的進行我們想要擺放的一種方式進行展現出來。

我們可以將盒子設定為display:flex彈性盒子和inline-flex：行內塊彈性盒子，設定彈性盒子之後我們就可以控制子元素的一些排列元素等。

設定子元素在主軸的排列方式flex-direction

當元素不換行時元素會自動壓縮和擴張，當元素換行時元素會自動調整間距。

stretch在本身沒有設定height屬性時才生效。

baseline當第乙個元素設定了margin-top等類似偏移的屬性時後續元素會統一文字基線。

在子元素中設定交叉軸的屬性，容器內只有單行元素時聽自己的，多行元素時聽父級元素的。

直接在子元素設定排列循序後，子元素會按照排列循序進行排列。

土地擴張是用來形容元素可以根據剩餘空間的乙個平均比例分配，直至將父元素全部填充。

預設值為0，代表不參與瓜分。

如上所示，乙個彈性盒子內有剩餘200的空間，此時給彈性盒子內的元素進行1:2:3的分配；

元素1分配的土地為200*（1/6）等於33.33

元素2分配的土地為200*（2/6）等於66.67

元素3分配的土地為200*（3/6）等於100

計算公式：元素擴張後的寬度=元素擴張前的寬度+元素剩餘的寬度*元素分配的比例

子元素土地收縮flex-shrink

土地收縮就是彈性盒子內的子元素超出彈性盒子的界限時，土地會預設收縮

如上所示，乙個彈性盒子內有超出300的空間，此時彈性盒子預設進行1:1:1收縮。

給彈性盒子內的元素進行設定1:2:3的分配；

權重值：3001+3002+3003=1800；

元素1收縮的土地為（3001/1800）300等於50

元素2收縮的土地為（3002/1800）300等於100

元素3收縮的土地為（3003/1800）*300等於150

到這裡大家可能會疑問，這不就是按照比例的進行縮放嗎？為什麼還需要計算的這麼複雜！！！

w3c標準盒子:boxwidth = padding2 + width + border2

ie6怪異盒子：boxwidth = width

在我們我們需要考慮w3c標準盒子模型和ie怪異盒子模型的width的計算方式。

css3 彈性盒子

display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...

Css3 彈性盒子

彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...

Css3彈性盒子

css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...