您現在的位置是:電腦技術吧?>? 故障問題 ??>??css3彈性盒模型,css的彈性伸縮模型??>??正文詳情

css3彈性盒模型,css的彈性伸縮模型

侯海瑩2019-11-16 10:00:47 人圍觀
簡介html5css3盒子模型Flexbox是一個布局模塊,而不是一個簡單的屬性,它包含父元素和子元素的屬性。flexbox布局的主要思想是可以改變相似元素的大小以適應可用空間。當可用空間變css3盒模

Flexbox是布局模塊,而不是一個簡單的屬性,它包含父元素和子元素的屬性。

Flexbox布局的主體思想是似的元素可以改變大小以適應可用空間,當可用空間變大,Flex元素將伸展大小以填充可用空間,當Flex元素超出可用空間時將自動縮小。

總之,Flex元素是可以讓你的布局根據瀏覽器的大小變化進行自動伸縮。

創建Flex容器flexbox布局首先需要創建一個flex容器。

為此給元素設置display屬性的值為flex。

對于IE10來說,我們需要在開頭的地方添加-ms-flexbox。

復制代碼代碼如下:.container{display:-webkit-flex;display:-moz-flex;display:flex;display:-ms-flexbox;}水平或垂直分布box-orient定義分布的坐標軸:vertical和horizional。

這兩個值分別定義盒子垂直顯示和水平顯示:復制代碼代碼如下:.container{display: box;box-orient: horizontal;}語法復制代碼代碼如下:box-orient: horizontal|vertical|inline-axis|block-axis|inherit;案例復制代碼代碼如下:!DOCTYPE htmlhtml lang=enheadmeta charset=utf-8/titleCentering an Element on the Page/titlestyle type=text/csshtml {height: 100%;} /p pbody {display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */display: -webkit-flex; /* 新版本語法: Chrome 21 */display: flex; /* 新版本語法: Opera 12.1, Firefox 22 *//p p /*垂直居中*/ /*老版本語法*/-webkit-box-align: center; -moz-box-align: center;/*混合版本語法*/-ms-flex-align: center; /*新版本語法*/-webkit-align-items: center;align-items: center;/p p /*水平居中*//*老版本語法*/-webkit-box-pack: center; -moz-box-pack: center; /*混合版本語法*/-ms-flex-pack: center; /*新版本語法*/-webkit-justify-content: center;justify-content: center;/p p margin: 0;height: 100%;width: 100% /* needed for Firefox */} /*實現文本垂直居中*/h1 {display: -webkit-box; display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;/p p -webkit-box-align: center; -moz-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;height: 10rem;} /p p /style/headbodyh1OMG, Im centered/h1/body/html [code]/p pstrong啟用Flexbox/strong/p p因為body元素包含了想要居中的標題元素,所以我們將他的display屬性值設置為flex:/p p[code]body {display: flex; } 主要作用是讓元素body使用flexbox布局,而不是普通的塊布局。

在文檔流中的所有子元素(即不是絕對定位的元素)現在都變成了伸縮項目。

反向分布復制代碼代碼如下:body {display: -webkit-box;display:-moz-box;box-orient: vertical;box-direction: reverse;color: white;}#box1{background: red;height: 100px;width: 80px;/p p}#box2{background: black;height: 100px;width: 80px;}#box3{background: blue;height: 100px;width: 80px;}/style/headbodydiv id=box11/divdiv id=box22/divdiv id=box33/div/body設置彈性框對齊方式還可以指定在解析了任何靈活長度和自動頁邊距之后,彈性容器的內容與主軸和橫軸(與主軸垂直)的對齊方式。

你可以通過 justify-content、align-items、align-self 和 align-content 屬性調整此對齊方式。

使用 justify-content 屬性,可以設置在解析了任何靈活長度和自動頁邊距之后,彈性項目與彈性容器主軸的對齊方式。

下圖顯示了 justify-content 的值以及這些值對彈性容器(含三個彈性項目)的影響。

代碼如下:justify-content:flex-start(默認值) 伸縮項目向一行的起始位置靠齊。

justify-content:flex-end 伸縮項目向一行的結束位置靠齊。

justify-content:center 伸縮項目向一行的中間位置靠齊。

justify-content:space-between 伸縮項目會平均地分布在行里。

第一個伸縮項目一行中的最開始位置,最后一個伸縮項目在一行中最終點位置。

justify-content:space-around 伸縮項目會平均地分布在行里,兩端保留一半的空間。

--------------------------------------------------------------------------------align-items 側軸對齊(適用于伸縮容器,也就是伸縮項目的父元素)align-items 是一個和 justify-content 相呼應的屬性。

align-items 調整伸縮項目在側軸上的定位方式。

可能的值有:代碼如下:flex-start:伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。

flex-end:伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊 。

center:伸縮項目的外邊距盒在該行的側軸上居中放置。

baseline:伸縮項目根據他們的基線對齊。

stretch(默認值):伸縮項目拉伸填充整個伸縮容器。

此值會使項目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。

--------------------------------------------------------------------------------flex-wrap 伸縮行換行目前為止,每個伸縮容器都有且只有一個伸縮行。

使用 flex-wrap 你可以為伸縮容器創建多個伸縮行。

這個屬性接受以下值:代碼如下:nowrap (默認)wrapwrap-reverse如果 flex-wrap 設置為 wrap,在一個伸縮行容不下所有伸縮項目時,伸縮項目會換行到一條新增的伸縮行上。

新增的伸縮行根據側軸的方向添加。

--------------------------------------------------------------------------------align-content 堆棧伸縮行align-content 會更改 flex-wrap 的行為。

它和 align-items 相似,但是不是對齊伸縮項目,它對齊的是伸縮行。

可能你已經想到了,它接受的值也很相似:復制代碼代碼如下:flex-start:各行向伸縮容器的起點位置堆疊。

flex-end:各行向伸縮容器的結束位置堆疊。

center:各行向伸縮容器的中間位置堆疊。

space-between:各行在伸縮容器中平均分布。

space-around:各行在伸縮容器中平均分布,在兩邊各有一半的空間。

stretch(默認值):各行將會伸展以占用剩余的空間。

--------------------------------------------------------------------------------align-self 側軸對齊伸縮項目的 align-self 屬性會覆蓋該項目的伸縮容器的 align-items 屬性。

它的值和 align-items 一樣:代碼如下:stretch (默認)flex-startflex-endcenterbaseline屬性講解box-direction 屬性規定框元素的子元素以什么方向來排列。

語法:box-direction: normal|reverse|inherit;box-pack 屬性規定當框大于子元素的尺寸,在何處放置子元素。

語法代碼如下:box-pack: start|end|center|justify;start :所有子容器都分布在父容器的左側,右側留空end :所有子容器都分布在父容器的右側,左側留空justify :所有子容器平均分布(默認值)center :平均分配父容器剩余的空間(能壓縮子容器的大小,并且有全局居中的效果)box-align 屬性規定如何對齊框的子元素。

語法代碼如下:box-align: start|end|center|baseline|stretch;start :子容器從父容器頂部開始排列end :子容器從父容器底部開始排列center :子容器橫向居中(有點奇怪)baseline :所有子容器沿同一基線排列(很難理解)stretch :所有子容器和父容器保持同一高度(默認值)box-flex 屬性規定框的子元素是否可伸縮其尺寸。

語法box-flex: value;看下面一個實例:代碼如下:div style=display:-webkit-box;border:1px solid #ccc; width:500px;height:50px;div style=-webkit-box-flex:1;background-color:#0f0/divdiv style=-webkit-box-flex:2;background-color:#f00/divdiv style=width:100px;background-color:#0f0/div/div與傳統的盒模型一樣,overflow屬性用來決定其顯示方式。

為了避免溢出,你可以設置box-lines為multiple使其換行顯示。

flex: initial一個 flex 屬性值被設為 initial 的伸縮項目,在有剩余空間的情況下不會有任何變化,但是在必要的情況下會被收縮。

代碼如下:flex: auto一個 flex 屬性值被設為 auto 的伸縮項目,會根據主軸自動伸縮以占用所有剩余空間。

auto 目前僅在 Opera 12.11 尚有效,在 Chrome 23.0.1271.95 上無效。

你可以通過使用 flex: 1; 來達到一樣的效果。

flex: none一個 flex 屬性值被設為 none 的伸縮項目,在任何情況都不會發生伸縮。

版權聲明:本文由 侯海瑩 整理編輯。

原標題:css3彈性盒模型屬性,css彈性盒子模型

轉載注明出處:http://www.dn9ww09s.icu/fault/12796.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • mov mp4轉換,mov怎么轉換mp4

    mov mp4轉換,mov怎么轉換mp4 相關圖片格式工廠mov轉換為mp4大多數用戶不熟悉mov格式文件,即QuickTime電影格式。它是蘋果公司開發的一種音頻和視頻文件格式,用于存儲常見的數字媒體類型。對于計算機平臺,可以很容易地...

  • win10沒有mmc文件,win10沒有mmc

    win10沒有mmc文件,win10沒有mmc 相關圖片什么是mmc一些用戶遇到了這樣的情況:MMC或MMC.exe進程在使用win10的過程中報告了一個錯誤。這是一個什么樣的過程?是否可以禁止或刪除?Mmc.exe是系統管理程mmc是誰...

  • text—decoration,decorative text

    text—decoration,decorative text 相關圖片text怎么用定義并使用“文本裝飾”屬性指定添加到文本的裝飾注意:完成的顏色由“顏色”屬性設置表示此屬性允許您設置文本的某些效果,例如下劃線。如果子元素沒有自己的裝飾,...

  • 火貓,火貓a杖

    火貓,火貓a杖 相關圖片火貓下載大多數人看直播平臺是為了鎖定幾個大品牌。事實上,還有一些其他的小型直播平臺也相當精彩,比如火烈鳥的直播。火烈鳥的直播以游戲視頻為主,覆蓋了國內外多個電子競...

  • Flash,Flash插件

    Flash,Flash插件 相關圖片nor flash每個人都喜歡漂亮的Flash動畫,但是制作起來有一些技術上的困難。你知道嗎,Dreamweaver作為一個網頁制作工具,也可以創建有趣的flash相冊。今天我們安卓 flash...

  • mv音悅臺,音悅臺MTV都看不了

    mv音悅臺,音悅臺MTV都看不了 相關圖片音悅臺怎么沒有了那些喜歡跟蹤明星八卦、歌手新歌和MV的人,大多會鎖定音樂劇舞臺。藝悅臺是一個專注于高清MV在線欣賞與傳播的音樂分享平臺。緊跟新歌發行速度,通過篩選網友提...

  • IE瀏覽器如何升級到IE11,如何切換到IE瀏覽器

    IE瀏覽器如何升級到IE11,如何切換到IE瀏覽器 相關圖片ie11瀏覽器怎么降到91)如何將Dreamweaver集成到IE瀏覽器中?Dreamweaver安裝程序將在上下文菜單中添加“使用Dreamweaver編輯”命令。我們還可以修改wiie瀏覽器跳轉到谷歌瀏覽器...

  • 免root黑域,黑域免補丁免root

    免root黑域,黑域免補丁免root 相關圖片黑域免root 免adb中國的Android應用程序并不是以標準的方式設計的。許多應用程序,即使不使用它們,也會在后臺啟動。它們不僅占用內存和CPU,而且消耗電力。因此,有許多工具可以免...

  • 文件引用格式,引用文件規定的格式

    文件引用格式,引用文件規定的格式 相關圖片js引用另一個文件的方法CSS外部引用使用外部CSS文件,一般瀏覽器都有緩存功能,所以用戶不需要每次都下載這個CSS文件。與內部參考文獻和內部參考文獻相比,外部參考文獻在節省帶寬...

  • vlookup函數的使用方法詳解,vlookup函數的使用舉例

    vlookup函數的使用方法詳解,vlookup函數的使用舉例 相關圖片excel找兩列不重復數據很多用戶使用Excel僅僅是為了使用表記錄功能,而大量的數據,讓人頭疼。事實上,對于Excel的高級用戶來說,他們將使用函數來處理數據并提高效率。今天我們將...

熱評文章

  • nvcpl,sesvc是什么進程

    nvcpl,sesvc是什么進程 相關圖片啟動nvcpldll時出現問題在進程表中,您對nvcpl感興趣嗎?nvcpl是什么過程?nvcpl是什么啟動項?Nvcpl.dll是NVIDIA顯卡的相關動態鏈接庫文件。因此,nvcpl進程進程是什么...

  • 網頁模板怎么應用,網頁模板與應用

    網頁模板怎么應用,網頁模板與應用 相關圖片html5手機網頁模板為了簡化生產過程。它通常用于先制作頁面,然后應用模板的簡單步驟:打開包含內容的頁面,打開“資源”面板,單擊“模板”按鈕,選擇模板,單擊“應用程序”按...

  • 抖音怎么切換鏡頭,抖音切換鏡頭怎么拍

    抖音怎么切換鏡頭,抖音切換鏡頭怎么拍 相關圖片抖音切換鏡頭視頻教程對于同一個短視頻,有些人可以采取不同的模式,例如,有些用戶可以切換鏡頭,使短視頻更有趣。所以有些用戶想知道如何在短視頻和自助餐之間切換?短視頻...

  • 堅果手機怎么樣,堅果pro3怎么樣

    堅果手機怎么樣,堅果pro3怎么樣 相關圖片錘子手機堅果pro怎么樣5月15日以后,沒有靈魂的蘋果將瘋狂地復制我們。錘子技術創始人羅永浩成功地將外界的目光吸引到了錘子新機螺母R1上。這款革命性的旗艦手機能讓蘋果瘋狂地復...

  • 技巧,快三技巧

    技巧,快三技巧 相關圖片男人 技巧Dreamweaver是一個WYSIWYG網頁編輯器,它集成了網頁制作和網站管理。由于DW的強大功能,我們可以直接在DW中定義CSS(樣式表),這給了我一個小問應用中心...

  • steam failed,steam安裝failed

    steam failed,steam安裝failed 相關圖片steamsetup一些玩家在絕地生存過程中遇到初始化蒸汽失敗的錯誤。原因是什么以及如何解決steam安裝不了...

  • div背景色,div背景色透明度

    div背景色,div背景色透明度 相關圖片打印div背景色代碼如下:div class=header divclass=header﹐leftheader﹐left/div divclass=header﹐rightdcss 背景色...

  • 手機鎖屏密碼忘了怎么辦,鎖屏密碼忘了怎么辦

    手機鎖屏密碼忘了怎么辦,鎖屏密碼忘了怎么辦 相關圖片gmail密碼忘了怎么辦更不用說國外了,即使國內用戶在工作中使用電子郵件,很多人還是習慣了谷歌gmail。然而,有些人有時會因為密碼太多而忘記Gmail密碼。Gmail如何更改密碼?一gmail密...

  • 常見的過渡方式,過渡的方式

    常見的過渡方式,過渡的方式 相關圖片英語常用過渡詞制作步驟:打開一個頁面,這個步驟非常關鍵。為什么要在編輯時打開頁面而不是設置頁面?這是因為頁面轉換的代碼必須顯示在代碼窗口的某些特定區域才能工作。在...

  • 光盤怎么刻錄,光盤刻錄大師刻錄失敗

    光盤怎么刻錄,光盤刻錄大師刻錄失敗 相關圖片光盤刻錄大師刻錄cd送禮物給親朋好友,發一段創意視頻是個不錯的選擇。但直接發送文件似乎很奇怪。事實上,你可以把錄像錄在CD上。由于許多人不知道如何錄制dvd,一個小版本已經...

關注微信

变脸官网查询