css彈性盒子新舊相容

標籤：方向   rect   方式   eve   css3   strong   column   置中   屬性   

前言：本篇隨筆是對彈性盒子有瞭解的人來寫的這篇文章，具體屬性產生的效果這裡不做說明，基礎的東西去查文檔。這裡只是總結。

時至今日，css3的flex彈性盒子在移動端基本上都是支援的，但不排除有些些低版本的裝置（Android4.4以下，只能相容舊版的flexbox布局），還有個別的國產裝置並不支援flex那麼就需要用到舊版的flex-box。

在移動端布局呢，我們最常用的無非這麼幾種情況
1、垂直置中

2,、平分

3、分配剩餘地區

那麼我們需要用到新舊盒子的哪些屬性呢？請看下面

一、開啟彈性盒子

新：flex

display:flex

舊：display:flex-box

二、主軸的排列對齊

新：justify-content: flex-start | flex-end | center | space-between | space-around;

舊：box-pack: start | end | center | justify;

三、側軸的排列對齊

新：align-items: flex-start | flex-end | center | baseline | stretch;

舊：box-align:box-align: start | end | center | baseline | stretch;

這裡要重點提一下stertch:讓子項目在側軸方向展開佔滿盒子。

四、分配剩餘空間

新：flex:

舊：box-flex

五、定義主軸（預設是x軸），還有排列的方向（預設是從左向右）

新：flex-direction: row | row-reverse | column | column-reverse;

舊：

box-direction: normal | reverse | inherit;

box-orient: horizontal | vertical | inline-axis（等同於horizontal） | block-axis(等同於vertical) |inherit;

 

說明：舊的用兩個屬性分別來控制主軸和排列方向，新的只用一個。

其中，inline-axis是預設值。且horizontal與inline-axis的表現似乎一致的，讓子項目橫排；而vertical與block-axis的表現也是一致的，讓元素縱列。

七、在移動端我們需要加上 -webkit-首碼

 

css彈性盒子新舊相容