导航菜单

首页 >  文章 >  CSS Flexbox入門指南和示例

CSS Flexbox入門指南和示例

图片说明:CSS Flexbox入門指南和示例,。

Flexbox不是單一屬性;它是一個完整的模塊,具有許多功能。在本文中,我們將查看CSS Flexbox的完整指南。在詳細介紹之前,我隻想回答為什麼我們應該使用彈性框佈局而不是使用顯示屬性,浮點屬性,位置屬性來做佈局網頁的傳統方式使用Flexbox的優點Flexbox會平均分配項目的高度和寬度,即使項目是動態添加的,您也無需關心CSS屬性 輕松顛倒物品的結構根據容器的動態寬度輕松增加和縮小物品的寬度通過單個屬性輕松控制垂直或水平元素的方向更改任何元素的順序96%的瀏覽器支持flexbox Flexbox的佈局請參考下圖,瞭解Flexbox的工作方式。Flexbox分為兩軸主軸和交叉軸。 在常規佈局中,當我們使用行內顯示或行內塊顯示時,它僅從左到右主軸: 這是默認情況下項目佈局的默認軸。不一定總是水平的。根據彎曲方向,它可以是垂直的主要開始/主要結束: 項目將從主要開始放置到主要結束主要尺寸: 該瓦特取決於撓曲方向上的容器的ID或高度橫軸: 橫軸垂直於主軸。 交叉開始/交叉結束: 從交叉開始到交叉結束開始佈置項目交叉尺寸: 柔性商品的寬度或高度(以交叉尺寸中的較大者為準)為該商品的交叉尺寸。十字尺寸屬性是十字尺寸中“寬度”或“高度”中的任何一個。在開始使用Flexbox屬性之前,我們應該瞭解哪些屬性適用於flex容器和flex項目。Flexbox容器屬性displayflex-directionflex-wrapjustify-contentsalign-itemsalign-contentsFlexbox項目屬性 orderflex-growflex-shrinkflex-basisflexalign-selfFlexbox容器屬性顯示我們知道display屬性具有內聯,塊,內聯塊等值的數量。但是,如果我們將值賦為flex,那麼我們將打開flexbox上下文1.container { display: flex }彈性方向flex-direction決定如何在主軸上水平或垂直佈置項目flex-direction: row|row-reverse|column|column-reverse|initial|inherit;上面是flex-direction屬性的可能值row: 行是彈性方向的默認值,其中項目將從左到右放置row-reverse: 項目將從右到左放置column:項目將從上到下垂直放置column-reverse:項目將自下而上放置initial: 將其值設置為默認值inherit:從父項繼承值flex-wrapflex-wrap控制如果容器寬度小於總項目寬度,則項目將移至下一行的行為。flex-wrap: nowrap | wrap | wrap-reverse;默認值: nowrapno-wrap:通過調整項目的寬度來適合一行 wrap: 將項目從上到下放到下一行wrap-reverse: 將項目從下到上放到下一行flex-flowflex-flow是flex-direction和flex-wrap的簡寫flex-flow: | 默認值: row no-wrap讓我們看一些例子:上面,我們看到瞭一個flex-flow的示例,其中flex-direction是row。您可以對flex-direction列執行相同的操作,而隻需垂直考慮以上內容即可。justify-contentjustify-content用於對齊主軸上的項目。它的容器屬性,以便將所有子項對齊到特定位置,例如居中,開始或結束,或在它們之間留出空間。1justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;默認值: flex-startflex-start -根據flex-direction將項目與容器的開頭對齊.container { flex-direction: row-reverse justify-content: flex-start; }如上所示,flex-start從右側開始,而不是從書寫模式方向開始center:將項目與中心對齊flex-end:根據flex-direction將項目與容器的末端對齊space-around:通過調整寬度在項目周圍留出空間space-between:在項目之間,而不是在容器的開頭和結尾之間留出空間space-evenly:在項目周圍留出相等的空間start:根據寫入模式方向將項目與容器的開頭對齊end:按照書寫模式方向將項目與容器的末端對齊align-itemsalign-items屬性用於對齊各個橫軸上的項目,就像我們為主軸指定正當內容align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;默認值: stretchstretch:如果未從外部獲得物品的高度,則占據容器的整個高度flex-start:考慮到橫軸,將項目與容器的開頭對齊center:考慮到橫軸,將項目與中心對齊flex-end:考慮到與橫軸對齊的項目baseline:考慮到與跨軸相關的項目內容基線的對齊項目align-contentalign-content用於對齊橫列中各行而不是項。您可能對align-items和align內容之間的差異感到困惑。讓我們來看一個比較對齊項目和對齊內容的示例。如您在上面的對齊項目中所看到的,將居中對齊項目在相應的橫軸上居中,將對齊內容對齊行在相應的橫軸的中心上。我們以兩行為例,因為align-content不會影響單行彈性項目屬性使用 order 屬性,可以重新排列容器項目的自然順序。默認值:0第一個圖 顯示瞭默認行為,其中所有項目的訂單值均為0。在小號的Econd圖, 第1項的(高亮顯示的)移動到最後,因為它的順序值大於剩餘的三個大。在 第三張圖中,第 3項移動到第一個位置,因為它的階次值為-1,該階數小於其他三個項。在F ourth圖中, 第1項和第3項舉措,以持續,因為他們的訂單價值大於其他。彈性成長flex-grow允許項目隨著容器大小大於總項目大小而增長。默認值: 0在上面的示例中:第一個圖 顯示瞭默認行為,其中不容納剩餘空間的項目僅占用提供給項目的寬度。在 第二張圖中, 您可以看到我們進行瞭flex-grow:1表示所有項目,這意味著所有項目均按相等的比例劃分剩餘空間。如果我們將所有項目的值都設為2,則它的行為相同,因為我們要給出比率值。在 第三張圖中, 項目2(突出顯示的項目)占用的空間是其他項目的兩倍,因為它的值為2,並且是其他項目值的兩倍。註意:不允許使用負值彎曲收縮flex-shrink屬性允許項目隨著容器尺寸的減小而收縮默認值:0如果容器中的所有項目的值為1,則所有項目將以相等的比例收縮。並且所有項目的值為1,隻有一個項目的值為2,然後該項目將縮小為其他項目的一半。例如:如上所示,在給定的flex-shrink中:2到第三個元素的收縮是其他元素的兩倍。不允許使用負值。彈性基礎flex-basis隻是flexbox上下文中容器項的最小寬度。默認值: 自動例如,如果我們沒有為flex-basis屬性提供值,則默認情況下其值為auto,則flexbox項的寬度將等於內容寬度。柔性flex是flex-grow,flex-shrink和flex-basis的簡寫默認值: 0 0自動flex-grow: 彈性值有很多可能性/ *一個值,如果是無單位數,則它的flex-grow * / flex:1 ;2/ *一個值,寬度/高度:flex-basis * / flex:10 em ; 彎曲:30 % ; 撓性:分鐘- 內容 ;3/ *兩個值:flex-grow | flex-basis * / flex:1 30 像素 ;4/ *兩個值:flex-grow | flex-shrink * / flex:2 2 ;5/ *三個值:flex-grow | 彈性收縮| flex-basis * / flex:2 2 10 % ;align-selfalign-self用於對齊各個橫軸中的單個項目,它將覆蓋align-items設置的值。如您在上面的示例中看到的,我們為第2項元素指定瞭align-self:center,然後僅更改瞭該項的位置。例子我們學到瞭很多東西,所以讓我們看一個實際的例子。垂直和水平居中元素/ *一個值,如果是無單位數,則它的flex-grow * / flex:1 ;2/ *一個值,寬度/高度:flex-basis * / flex:10 em ; 彎曲:30 % ; 撓性:分鐘- 內容 ;3/ *兩個值:flex-grow | flex-basis * / flex:1 30 像素 ;4/ *兩個值:flex-grow | flex-shrink * / flex:2 2 ;5/ *三個值:flex-grow | 彈性收縮| flex-basis * / flex:2 2 10 % ;輸出將是:創建導航欄 1//html2 3 4 5 6 7 8 9 10 11 12 13 14 15.container { 3 display: flex; 4 width: 47%; 5 height: 300px; 6 border: 2px solid; 7 padding: 5px; 8} 9 10.container .item { 11 flex-basis: 100px; 12 height: 96px; 13 border: 2px solid; 14 justify-content: center; 15 color: white; 16 align-items: center; 17 background-color: cadetblue; 18}輸出將是:

 >  本文声明:

本文内容不代表成人Av自拍_纹身光头土豪_日本一道无码在线av--蜜桃圈APP视频立场,本站仅作整理、存档及学习之用,文章版权归属于原作者所有。

部分原创内容欢迎收藏、学习、交流、转载,但请保留文章出处及链接。

文章名称:CSS Flexbox入門指南和示例

文章地址:http://www.gonenoya.com/article/42.html
有关热门【CSS Flexbox入門指南和示例】的标签