今天有空寫了乙個自己主頁的**,瀏覽器相容,有乙個以前的問題也是很常見的問題,既然遇見了,索性就記錄下來。直接看問題吧
前提:適合子元素需要水平居中,但垂直方向需要進行position:absolute
,如果是進行position:relative
或者其他
,在ie
或chrome
都是一樣的,都要以子元素width中點
為基點。(ps:其實這並沒有卵用,一般子元素position定位父元素都不會用flex來排版。但這只是遇到的問題,便隨手記錄一把。(打**的路上總需要一些坑才能充實自己))。ie下:父容器中屬性:display: flex;justify-content:center;
是水平居中,但是基點是左上角
,如下圖。如果想要水平居中,則需要加:transform:translatex(-50%)
,這意思就是將作用在元素上的總體位置向左移動自身width的50%
,好處就是不管自知不知道該元素的width都可以。
chrome:父容器中屬性:display: flex;align-items: center;
直接將子元素進行水平居中,基點是以子元素width的中點
,而不是ie中的左上角
;
關於水平垂直居中,可以參考
關於字型問題:
git建立倉庫:
flex布局與position定位存在衝突
情況 現在布局很多時候用到flex方式,有次我將flex布局後的元素b,然後給元素b新增position定位,發現元素b無法被子元素撐開 doctype html zh cn utf 8 viewport content width device width,initial scale 1 flex...
flex布局相容問題
flex布局分為舊版本dispaly box 過渡版本dispaly flex box 以及現在的標準版本display flex 所以如果你只是寫新版本的語法形式,是肯定存在相容性問題的。android 2.3 開始就支援舊版本 display webkit box 4.4 開始支援標準版本 di...
自用 flex布局相容寫法
當我在調垂直居中怎麼都居中不了的時候,我就會想用 flex 布局。當我全部都用了 flex 布局而沒有帶上相容字首,在一些裝置上,樣式簡直不忍直視 記錄一下 flex 的相容寫法,方便以後查閱。就寫幾個常用的,其他的應該就在前面加字首即可。display webkit box display moz...