自用 flex布局相容寫法

2021-10-03 20:04:18 字數 1067 閱讀 4030

當我在調垂直居中怎麼都居中不了的時候,我就會想用 flex 布局。

當我全部都用了 flex 布局而沒有帶上相容字首,在一些裝置上,樣式簡直不忍直視…

記錄一下 flex 的相容寫法,方便以後查閱。

就寫幾個常用的,其他的應該就在前面加字首即可。

display

: -webkit-box;

display

: -moz-box;

display

: box;

display

: -webkit-flex;

display

: -ms-flexbox;

display

: flex;

-webkit-justify-content:;

justify-content

:;

-webkit-align-items:;

-moz-align-items:;

-ms-align-items:;

-o-align-items:;

align-items

:;

-webkit-flex-wrap:;

-moz-flex-wrap:;

-ms-flex-wrap:;

-o-flex-wrap:;

flex-wrap

:;

-webkit-flex-direction:;

-moz-flex-direction:;

-ms-flex-direction:;

-o-flex-direction:;

flex-direction

:;

-webkit-box-ordinal-group:;

-moz-box-ordinal-group:;

-ms-flex-order:;

-webkit-order:;

order

:;

flex布局相容問題

flex布局分為舊版本dispaly box 過渡版本dispaly flex box 以及現在的標準版本display flex 所以如果你只是寫新版本的語法形式,是肯定存在相容性問題的。android 2.3 開始就支援舊版本 display webkit box 4.4 開始支援標準版本 di...

flex布局相容問題

flex布局分為舊版本dispaly box 過渡版本dispaly flex box 以及現在的標準版本display flex 所以如果你只是寫新版本的語法形式,是肯定存在相容性問題的。ios pc ie10開始支援,但是ie10的是 ms形式的。下面是各個瀏覽器的支援情況 css彈性盒模型 f...

Flex布局的相容性

寫在前面 flex布局早在2009年就有了,而現在是2015年6月8日,使用最新的flex語法會發現支援程度並不好,即使是在 高階 瀏覽器上也是如此,比如chrome firefox safari android ios safari下支援程度各不相同 網上現有的 中充斥著各種版本,在chrome下...