Flex彈性布局語法教程大全

來源:【易網】網站設計公司 | 更新:2018-09-15

2009年,W3C提出了一種新的方案:Flex布局,可以簡便、完整、響應式地實現各種頁面布局。目前,它已經得到了所有瀏覽器的支持,這意味著,現在就能很安全地使用這項功能。

Flex彈性布局

我們學習Flex布局,主要從兩方面入手:Flex的容器(以下稱:flexPack)、Flex的內部成員(以下稱:flexItem)。

Flex布局

定義flex很簡單,只要在flexPack中定義其 display: flex 屬性即可;display: inline-flex 也可以讓flexPack容器自身是行內元素的情況下內部成員實現Flex布局。注意,設為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。

<div class="flexPack" style="display: flex">
	<div class="flexItem"></div>
	<div class="flexItem"></div>
	<div class="flexItem"></div>
</div>
flexPack容器屬性屬性取值屬性概念
flex-direction:row; (默認值) 主軸為水平方向,起點在左端。
row-reverse; 主軸為水平方向,起點在右端。
column; 主軸為垂直方向,起點在上沿。
column-reverse; 主軸為垂直方向,起點在下沿。
定義主軸的方向(即項目的排列方向)
flex彈性布局
flex-wrap:nowrap;(默認值) 不換行。
wrap; 換行,第一行在上方。
wrap-reverse; 換行,第一行在下方。
默認項目都排在一條線(又稱軸線)上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
flex彈性布局
flex-flow:<flex-direction> + <flex-wrap>;flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。
justify-content:flex-start;(默認值) 左對齊
flex-end; 右對齊
center; 居中
space-between; 兩端對齊,項目之間的間隔都相等。
space-around; 每個項目兩側的間隔相等。
所以,項目之間的間隔比項目與邊框的間隔大一倍。
定義項目在主軸上的對齊方式。
flex彈性布局
align-items:stretch;(默認值) 如果項目未設置高度或設為auto,
將占滿整個容器的高度。
flex-start; 交叉軸的起點對齊。
flex-end; 交叉軸的終點對齊。
center; 交叉軸的中點對齊。
baseline; 項目的第一行文字的基線對齊。
定義項目在交叉軸上如何對齊。
flex彈性布局
align-content:stretch;(默認值) 軸線占滿整個交叉軸。
flex-start; 與交叉軸的起點對齊。
flex-end; 與交叉軸的終點對齊。
center; 與交叉軸的中點對齊。
space-between; 與交叉軸兩端對齊,軸線之間的間隔平均分布。
space-around; 每根軸線兩側的間隔都相等。
所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
定義多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
flex彈性布局
flexItem成員屬性屬性取值屬性概念
order:數字; (-999... ~ 999... 默認0)項目的排列順序。數值越小,排列越靠前,默認為0。
flex彈性布局
flex-grow:數字; (-999... ~ 999... 默認0)
如果所有項目的flex-grow屬性都為1,
則它們將等分剩余空間(如果有的話);
如果一個項目的flex-grow屬性為2,其他項目都為1,
則前者占據的剩余空間將比其他項多一倍。
項目的放大比例,默認為0,即如果存在剩余空間,也不放大。
flex彈性布局
flex-shrink:數字; (0 ~ 999... 默認1)
如果所有項目的flex-shrink屬性都為1,
當空間不足時,都將等比例縮小;
如果一個項目的flex-shrink屬性為0,其他項目都為1,
則空間不足時,前者不縮小。
負值對該屬性無效。
定義項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。
flex彈性布局
flex-basis:auto;(默認值) 自動
長度值; 可以設為跟width或height屬性一樣的值(如90px),
則項目將占據固定空間。
定義在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。
flex:<flex-grow> + <flex-shrink> + <flex-basis>
該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性,而不是單獨寫三個分離的屬性,
因為瀏覽器會推算相關值。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。
align-self:auto | flex-start | flex-end | center | baseline | stretch;
該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。
align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。
flex彈性布局

以上內容來自易網內部員工網站建設技術培訓文檔,易網小編申請后拿出來和大家分享,希望能對從事網站設計的同僚們有所幫助,版權所有,請勿轉載!

排球比赛可以没有自由人吗