彈性盒模型基礎使用

彈性盒模型

需要一種更加簡單,有效的方式來對乙個元素的子元素進行排列,布局,對齊,分配空間

主要用手機移動端布局網頁也可以是使用

開啟彈性盒模型 display:flex;

會將所有的子元素並排成一行,自動分配空間,

子元素寬的不寫為零,高不寫繼承父元素的高度100%

彈性盒模型:

瀏覽器元素顯示的寬 = 元素的設定寬度/所有子元素之和*父元的寬度

主軸控制方向

flex-direction :row; 主軸向右 flex-direction :row-reverse; 向左 flex-direction :column; 向下 flex-direction

:column-reverse; 向上

交叉軸換行

換行子元素之和大於父元素的寬度

flex-wrap
:nowrap;  不換行
flex-wrap
:wrap;    向下換行
flex-wrap
:wrap-reverse;  向上換行

flex-flow: row wrap;復合寫法

主軸多行樣式控制

所有子元素對齊樣式
justify-content
: flex-start; 子元素起點對齊
justify-content
: flex-end;  終點對齊
justify-content
: center;    居中 是往中間靠攏
justify-content
:space-between;   兩端對齊 中間留有空隙
子元素之間的間隙= (父元素的寬度- 一行子元素之和)/( 一行元素的個數-1)
justify-content
:space-around;   子元素到父元素之間有空隙  子元素與子元素之間有空隙
子元素與父元素寬度間隙 = (父元素的寬度- 一行子元素的寬度之和)/(2*一行元素的個數)
子元素與子元素的間隙 = (父元素的寬度- 一行子元素的寬度之和) / 一行元素的個數
子元素與父元素寬度間隙是  =子元素與子元素/2

交叉軸樣式

單行屬性控制

align-items :flex-start; 起點對齊 align-items :flex-end; 終點位置對齊 center 居中

baseline 以文字基線對齊

交叉軸單行單個個元素的控制

align-self :flex-start; 起點對齊 :flex-end; 終點位置對齊

center 居中

交叉軸多行對其央視

align-content :flex-start; 起點對齊 align-content :flex-end; 終點位置對齊 align-content :center 居中 align-content :space-between 兩端對齊中間留有空隙 align-content :space-around 子元素到父元素之間有空隙子元素與子元素之間有空隙子元素與父元素寬度間隙 = (父元素的寬度- 一行子元素的寬度之和)/(2*一行元素的個數) 子元素與子元素的間隙 = (父元素的寬度- 一行子元素的寬度之和) / 一行元素的個數

25子元素與父元素寬度間隙是 =子元素與子元素/2

彈性元素的布局位置改變

在彈性布局元素裡才能使用

order: 0; 預設為零數字越大彈性元素排序在最後數字越小彈性元素排序越前

彈性增長因子。

一行必須有剩餘空間

flex-grow:0; 預設不擴充

一行都沒有彈性增長因子的時候有乙個元素設定增長因子或占有所有的剩餘空間;

元素1的實際 = 元素1的寬度() + (父元素寬度-一行子元素之和)*元素1的彈性增長因子/子元素彈性因子和

彈性縮放因子

一行必須有子元素的寬度之和大於父元素

flex-shrink: 1; 預設值不進行縮放

一行都沒有彈性縮放因子的時候就是原本的樣式

有乙個元素設定縮放因子該元素就會進行縮小,讓出自身元素的空間

計算縮放因子的元素大小=設定元素的寬度-(一行子元素寬度之和-父元素的寬度)*元素縮放因子/元素縮放因子之和

因子復合寫法

flex:atuo; 一行剩餘空間就擴大一行沒有剩餘空間就縮小

flex:none; 設定多少就是多少不擴張不縮小

彈性盒模型基礎使用

彈性盒模型

彈性盒模型

彈性盒模型

相關推薦