flex 布局華為meta8 自帶瀏覽器相容

2021-09-11 16:16:46 字數 670 閱讀 9425

現在的手機有很多的需要垂直居中和水平居中,還要和能夠很完美的配合適屏的需求,css3**現了完美的盒模型box-flex和flex彈性布局,

網上能找到各種關於這兩種布局的資料,用法也不難;

哈哈昨天上線突然發現華為note8 瀏覽器不相容flex 布局,只需要一招變解決了問題,最好還是記錄一下。

相容問題

現在大多數的手機都是能夠相容flex布局的,而且我們主要用的也是flex更多一些,所以對於box布局並沒有太多的使用與研究,但是最近在使用flex布局的時候卻發現華為meta8自帶的瀏覽器(版本比較低的啦)卻對這個flex布局不支援,卻對下面的這個屬性支援,這樣又可以使用啦啦啦啦。。。。。

.box
哈哈,更讓人跌破眼鏡的是,在相容華為meta8自帶瀏覽器的時候,因專案中使用的是stylus預處理器,在進行編譯的時候卻不能編譯

.item
最後的最後加了乙個padding的屬性才可以編譯,雖然不知道為啥,但是編譯成功了,而且值得注意的是:這個padding的屬性必須放緊挨著才可以編譯,雖然覺得有點不可思議。。。。。

.item

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫,意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...

布局(flex布局)

彈性盒模型 display flex,排列方式根據主軸方向排列。子元素超出預設不換行,而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...

flex 平鋪布局 Flex 布局教程

網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案,基於盒狀模型,依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便,比如,垂直居中就不容易實現。2009年,w3c 提出了一種新的方案 flex 布局,可以簡便 完整 響應式地實現各種頁...