Flex彈性布局深入

2018-10-16 787 0 編輯:深正互聯 來源:互聯網

CSS3之前,我們對面布局是怎么設計的,圖文列表并排的時候,大多數都是絕對定位,浮動布局,這不失為一個好的辦法,今天來講一下新的布局,彈性布局


什么是Flex 布局?

Flex 是 Flexible Box 的縮寫,意為”彈性布局”,用來為盒狀模型提供最大的靈活性。(任何一個容器都可以指定為 Flex 布局)

網站布局

基本概念

采用 Flex 布局的元素,稱為 Flex 容器(flex container),簡稱”容器”。它的所有子元素自動成為容器成員,稱為 Flex 項目(flex item),簡稱”項目”。


容器的屬性

容器屬性也就是父級元素中樣式設置的屬性

決定主軸的方向(即項目的排列方向,橫或者豎)

flex-direction: row;

·row(默認值):主軸為水平方向,起點在左端。

·row-reverse:主軸為水平方向,起點在右端。

·column:主軸為垂直方向,起點在上沿。

·column-reverse:主軸為垂直方向,起點在下沿。


項目都排在一條線(又稱”軸線”)上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。

flex-wrap: wrap;

·nowrap(默認):不換行。

·wrap:換行,第一行在上方。

·wrap-reverse:換行,第一行在下方。


flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。

flex-flow: row wrap;


justify-content屬性定義了項目在主軸(x軸)上的對齊方式。

justify-content: space-around;

·flex-start(默認值):左對齊

·flex-end:右對齊

·center: 居中

·space-between:兩端對齊,項目之間的間隔都相等。

·space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。


align-items屬性定義項目在交叉(y軸)軸上如何對齊。(總體的布局)

align-items: center;

·stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。

·flex-start:交叉軸的起點對齊。

·flex-end:交叉軸的終點對齊。

·center:交叉軸的中點對齊。

·baseline: 項目的第一行文字的基線對齊。


align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。

align-content: space-around;


stretch(默認值):軸線占滿整個交叉軸。

flex-start:與交叉軸的起點對齊。

·flex-end:與交叉軸的終點對齊。

·center:與交叉軸的中點對齊。

·space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。

·space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。

網站布局

項目屬性

項目屬性也就是子級元素中樣式設置的屬性

order屬性

order屬性定義項目的排列順序。數值越小,排列越靠前,默認為0。

order: 0;


flex-grow屬性

flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。

flex-grow: 0;


flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。

flex-shrink: 1;


flex-basis屬性

flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。

flex-basis: auto;


flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。

flex: 0 1 auto;


align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。

align-self: auto;

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾