彈性盒模型基礎使用

彈性盒模型

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

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

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

子元素寬的不寫為零,高不寫繼承父元素的高度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; 向上換行

主軸多行樣式控制

所有子元素對齊樣式

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; 設定多少就是多少 不擴張 不縮小

彈性盒模型

1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...

彈性盒模型

1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...

彈性盒模型

1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...