国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 對Flex布局的理解及其使用場景

對Flex布局的理解及其使用場景

來源:千鋒教育
發(fā)布人:wjy
時間: 2022-09-06 17:33:48 1662456828

Flex是FlexibleBox的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內元素也可以使用Flex布局。注意,設為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素,稱為Flex容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為Flex項目(flex item),簡稱"項目"。容器默認存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis),項目默認沿水平主軸排列。

對Flex布局的理解及其使用場景

以下6個屬性設置在容器上

flex-direction屬性決定主軸的方向(即項目的排列方向)。flex-wrap屬性定義,如果一條軸線排不下,如何換行。flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。justify-content屬性定義了項目在主軸上的對齊方式。align-items屬性定義項目在交叉軸上如何對齊。align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。

以下6個屬性設置在項目上

order屬性定義項目的排列順序。數(shù)值越小,排列越靠前,默認為0。flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。flex-shrink屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。flex-basis屬性定義了在分配多余空間之前,項目占據(jù)的主軸空間。瀏覽器根據(jù)這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。flex屬性是flex-grow,flex-shrink和flex-basis的簡寫,默認值為0 1 auto。align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。

 

簡單來說: flex布局是CSS3新增的一種布局方式,可以通過將一個元素的display屬性值設置為flex從而使它成為一個flex容器,它的所有子元素都會成為它的項目。一個容器默認有兩條軸:一個是水平的主軸,一個是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向。可以使用justify-content來指定元素在主軸上的排列方式,使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規(guī)定當一行排列不下時的換行方式。對于容器中的項目,可以使用order屬性來指定項目的排列順序,還可以使用flex-grow來指定當排列空間有剩余的時候,項目的放大比例,還可以使用flex-shrink來指定當排列空間不足時,項目的縮小比例。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經(jīng)許可不得擅自轉載。
10年以上業(yè)內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
軟件開發(fā)管理流程中會出現(xiàn)哪些問題?

一、需求不清需求不明確是導致項目失敗的主要原因之一。如果需求沒有清晰定義,開發(fā)人員可能會開發(fā)出不符合用戶期望的產品。二、通信不足溝通問...詳情>>

2023-10-14 13:43:21
軟件定制開發(fā)中的敏捷開發(fā)是什么?

軟件定制開發(fā)中的敏捷開發(fā)是什么軟件定制開發(fā)中的敏捷開發(fā),從宏觀上看,是一個高度關注人員交互,持續(xù)開發(fā)與交付,接受需求變更并適應環(huán)境變化...詳情>>

2023-10-14 13:24:57
什么是PlatformIo?

PlatformIO是什么PlatformIO是一個全面的物聯(lián)網(wǎng)開發(fā)平臺,它為眾多硬件平臺和開發(fā)環(huán)境提供了統(tǒng)一的工作流程,有效簡化了開發(fā)過程,并能兼容各種...詳情>>

2023-10-14 12:55:06
云快照與自動備份有什么區(qū)別?

1、定義和目標不同云快照的主要目標是提供一種快速恢復數(shù)據(jù)的方法,它只記錄在快照時間點后的數(shù)據(jù)變化,而不是所有的數(shù)據(jù)。自動備份的主要目標...詳情>>

2023-10-14 12:48:59
服務器為什么要用Linux?

服務器為什么要用Linux作為服務器操作系統(tǒng)的優(yōu)選,Linux在眾多選擇中脫穎而出。Linux作為服務器操作系統(tǒng)的優(yōu)選,有其獨特的優(yōu)勢和特點。包括其...詳情>>

2023-10-14 12:34:11