您現在的位置是:電腦技術吧?>? 編程技術 ??>??displayflex,display flex什么意思??>??正文詳情

displayflex,display flex什么意思

宗云露2019-11-18 04:20:32 人圍觀
簡介display在過去的兩天里,我一直在做手機項目,并使用CSS3的新特性。還不是所有瀏覽器都支持它,所以請使用前綴。請參見以下:HTML代碼:div clas s=s-indcssdisplayflex

這兩天做手機項目,使用到這個css3新屬性。

現在還不為所有瀏覽器支持,所以使用的時候要加上前綴。

使用方法見下面:html代碼:div class=s-indLine div class=s-indNav s-indIntro span class=s-icon/span p品牌介紹/p /div div class=s-indNav s-indInfo span class=s-icon/span p優惠信息/p /div /div div class=s-indLine div class=s-indNav s-indShop span class=s-icon/span p門店查找/p /div div class=s-indNav s-indGoods span class=s-icon/span p熱賣商品/p /div /divcss代碼:.s-indLine{ display: -webkit-box; display: -moz-box; display: box; margin-bottom: 10px; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal;}.s-indLine .s-indNav{ -webkit-box-flex: 5; -moz-box-flex: 5; box-flex: 5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 10px; color: #ffffff; text-align: center; height: 105px; padding: 15px 0px; font-size: 1.5rem;}.s-indLine .s-indNav:first-child{ margin-right: 10px;}.s-indIntro{ background: #4eb566;}.s-indInfo{ background: #ffa422;}.s-indShop{ background: #7788f2;}.s-indGoods{ background: #ef604d;}.s-indLine .s-indNav .s-icon, .s-groupNav .s-icon{ width: 50px; height: 50px; display: inline-block; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}.s-indIntro .s-icon{ background-image: url(group.png);}.s-indInfo .s-icon{ background-image: url(group.png);}.s-indShop .s-icon{ background-image: url(group.png);}.s-indGoods .s-icon{ background-image: url(group.png);}可以不給子元素設置box-flex值,直接使用width代替,也可以設置margin 和 padding 值。

得到的效果圖如下:

在chrome或者手機其他的以-webkit為內核的瀏覽器上調試時,上面的代碼是沒有問題的,但是在火狐下面,會出現問題,如下圖所示:

這地方解決辦法,必須給父元素添加width樣式,例如 width: 100%; 即可。

此外在火狐上還有一個問題,上面說到可以給子元素不設置box-flex,而是設置width,但是在火狐上不能識別width,而是必須設置box-flex。

版權聲明:本文由 宗云露 整理編輯。

原標題:display的flex布局,display:flex屬性

轉載注明出處:http://www.dn9ww09s.icu/program/13387.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 怎么切換輸入法,怎么設置輸入法

    怎么切換輸入法,怎么設置輸入法 相關圖片切換輸入法相信不會切換輸入法的用戶不在少數。如果輸入法不能關閉怎么辦?怎么解決?在這種情況下,可以轉到控制面板-區域和語言選項-語言-清除信息-以設置默認輸入語言搜狗輸...

  • 怎樣制作幻燈片的效果,幻燈片制作

    怎樣制作幻燈片的效果,幻燈片制作 相關圖片ppt制作動畫效果作為一個不懂代碼的業余網頁制作人,他經常羨慕一些由專業程序員在瀏覽器中編譯的酷多媒體作品。唉,學習這個程序可不是一天的工作。它需要良好的邏輯思維能力...

  • hkcmd是什么進程,wuauclt是什么進程

    hkcmd是什么進程,wuauclt是什么進程 相關圖片電腦結束進程快捷鍵是什么最近,許多小型合作伙伴報告說,他們在打開任務管理器后發現了一個名為hkcmd.exe的進程,但他們不知道hkcmd.exe是什么進程。可以關閉hkcmd.exe電腦強制結束進...

  • 怎么從事動畫,高級動畫

    怎么從事動畫,高級動畫 相關圖片C4D 復雜模型動畫目前,CSS3已經得到了廣泛的應用,其中一個重要的成員就是CSS3動畫。而且,隨著CSS動畫的逐步深入和普及,越來越復雜和細膩的動畫場景也層出不窮。比如,上個月J...

  • win10如何深度清理c盤,win10刪除c盤無用文件

    win10如何深度清理c盤,win10刪除c盤無用文件 相關圖片c盤local可以刪嗎我相信許多使用win7的小伙伴在打開C磁盤后發現了一個名為perflags的額外文件夾。那么perflags是什么樣的文件夾呢?性能可以刪除嗎?接下來,跟隨超人win10搜不到wifi列表...

  • 下劃線怎么用鍵盤打出來,如何用鍵盤輸入下劃線

    下劃線怎么用鍵盤打出來,如何用鍵盤輸入下劃線 相關圖片下橫線用鍵盤怎么打一定有很多朋友在使用WPS的過程中,遇到過需要下劃線的地方。那么我們如何使用鍵盤來輸入WPS下劃線呢?如果不顯示下劃線,我們該怎么辦?讓我們跟隨超人軟件...

  • 圖形元件,怎樣創建圖形元件

    圖形元件,怎樣創建圖形元件 相關圖片圖形元件的作用同步或不同步嵌套在圖形組件中的動畫與主時間線。在面板中選擇“同步”選項。應用修補動畫時,同步可見。選擇關鍵幀以在屬性面板中找到同步選項,這意味著嵌套...

  • 完美解碼播放器手機版,播放器播放器

    完美解碼播放器手機版,播放器播放器 相關圖片完美解碼播放設置完美解碼播放器的一個特點是其強大的解碼能力和自己定制的解碼模式。那么,如何設置完美解碼播放器的解碼模式呢?一。解碼方案設置步驟:1。退出完美解碼播放...

  • 設計師的基本要求,平面設計的基本原則

    設計師的基本要求,平面設計的基本原則 相關圖片可持續發展原則對設計師的要求基于Joshua Porter總結的優秀UI設計原則,tiah重新編排并添加了圖形解釋,以便于理解kuyou清晰的界面是UI設計的第一步。要讓用戶喜歡你的用戶界室內設計的...

  • win7update需要更新嗎,window7配置update失敗

    win7update需要更新嗎,window7配置update失敗 相關圖片win7還原更改怎么跳過當我們使用win7時,電腦右下角經常會有關于windows更新的提示,強迫癥很煩人。windows更新意味著什么?我能把它關掉嗎?在Windows 7中win7配置更新100%不動...

熱評文章

  • 2003word字數統計在哪,doc文檔字數統計在哪里

    2003word字數統計在哪,doc文檔字數統計在哪里 相關圖片word技術在哪里當我們用word寫文章時,單詞計數的功能特別實用。當我們遇到需要字數的字操作時,這個小小的字功能可以省去我們很多的心血。但很多人不知道count這個詞在哪里,電腦...

  • j,,j怎么

    j,,j怎么 相關圖片k?j病毒名稱(中文):病毒別名:威脅等級:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁木馬假冒國外某知名網銀網頁,竊取用戶atmcar新j...

  • eclipse字體大小設置 主題設置,eclipse字體大小設置 快捷鍵

    eclipse字體大小設置 主題設置,eclipse字體大小設置 快捷鍵 相關圖片pr字體大小怎么改不了Eclipse是一個開源的、基于Java的可擴展開發平臺,具有一組標準的插件,包括Java開發工具。許多用戶在使用eclipse的過程中需要設置字體大小,但是他微博的蘋果版...

  • word繪制斜線表頭,繪制斜線表頭

    word繪制斜線表頭,繪制斜線表頭 相關圖片word繪制表格如何繪制斜線標題是許多word用戶頭疼的問題。今天,超人軟件將介紹如何在word2003和word2007中繪制word中的斜線標題。感興趣的合作伙伴不應該word斜線表頭怎么打字...

  • 開發者證書,開發者證書怎么獲取

    開發者證書,開發者證書怎么獲取 相關圖片免費ios開發者證書付款成功后,您將收到一封來自Apple Developer suport的確認電子郵件,如下圖所示。電子郵件中有一個登錄按鈕,單擊后可以進入Apple Deve蘋果開發者證書類型...

  • 懷舊服多玩魔盒怎么徹底刪除,wow大腳插件設置教程

    懷舊服多玩魔盒怎么徹底刪除,wow大腳插件設置教程 相關圖片魔獸世界多玩魔盒教程現在市場上有很多游戲盒,一個玩家使用多個游戲盒后發現不適合自己。那么如何徹底刪除多場魔盒呢?現在,超人軟件編輯就來介紹一下如何徹底刪除多場魔盒...

  • 網頁設計,外國優秀網頁設計

    網頁設計,外國優秀網頁設計 相關圖片優秀網頁設計官網“火星救援”仍處于起步階段。《星球大戰7》即將上映。事實上,即使沒有這些電影,人們對宇宙的熱情也從未降低。自古以來,人類喜歡抬頭仰望天空,這也解釋了...

  • 玫瑰小鎮魅力圖標有什么用,qq魔法卡片手機版

    玫瑰小鎮魅力圖標有什么用,qq魔法卡片手機版 相關圖片qq輸入法怎么導入對于很多QQ用戶來說,點亮所有的圖標是一件非常有趣的事情。玫瑰城是一個圖標,許多人沒有點燃。那么,玫瑰城的標志性建筑如何才能被點亮呢?如果玫瑰城進不來...

  • win10如何獲得管理員權限,win10如何開管理員權限

    win10如何獲得管理員權限,win10如何開管理員權限 相關圖片w10提供管理員權限當我們安裝軟件時,我們經常提示管理員許可。你知道如何設置win10的管理員權限嗎?win10的管理員權限有什么用?現在,超人軟件編輯將為您解答。我希望你有win10家...

  • div內容上下居中,div內容居中

    div內容上下居中,div內容居中 相關圖片設置div內容居中盡管divs中的內容居中問題一直是一個比較老的話題,但最近發現許多前端開發人員都在問如何實現它。事實上,互聯網上有很多數據和案例。這里我將總結一些常見的處...

關注微信

变脸官网查询