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

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

手機站
千鋒教育

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

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

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

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

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

來源:千鋒教育
發布人: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屬性定義項目的排列順序。數值越小,排列越靠前,默認為0。flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。flex-shrink屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為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來規定當一行排列不下時的換行方式。對于容器中的項目,可以使用order屬性來指定項目的排列順序,還可以使用flex-grow來指定當排列空間有剩余的時候,項目的放大比例,還可以使用flex-shrink來指定當排列空間不足時,項目的縮小比例。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師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