哪吒人生信條:如果你所學的東西 處於喜歡 纔會有強大的動力支撐。
把你的前端拿捏得死死的,每天學習得爽爽的,關注這個不一樣的程序員,如果你所學的東西 處於喜歡 纔會有強大的動力支撐。
前言
本篇文章進行學習css
中的一個重點應用,佈局樣式爲flex
佈局,相信你學習瞭解過display
屬性,position
屬性,float
屬性,但今天只學習新東西就是flex
佈局。
flex佈局是什麼
flex
是flexible box
的縮寫,意思是彈性佈局,代碼樣式如下:
.box {
display: flex;
}
Flexbox Layout
模塊是提供一個更有效的方式來佈置,對齊和item
之間在一個容器中分配的控件,即使它們的大小是未知的,或者是動態的,所以單詞命名flex
(彈性工作制的)
flex
佈局可以使容器更改其item
的寬度,高度,以便最好地填充可用空間,或者收縮它們來防止溢出。flexbox
佈局使用比較合適應用程序地組件和小規模佈局上。
在webkit
內核地瀏覽器中,要加上-webkit
前綴哦,代碼格式如下:
.box {
display: -webkit-flex;
display: flex;
}
當設置flex
佈局之後,子元素(item
)的float
,clear
,vertical-align
屬性會失效。
學習前要先了解概念
flex container
flex items
設置flex
佈局的元素爲flex
容器(flex container
),簡稱爲容器。它的所有子元素都是容器的成員,flex
項目(flex item
),簡稱爲項目。那麼請查看如下圖,解析flex
佈局背後的主要思想。
如圖可以看出,main axis
是從main-start
到main-end
,交叉軸cross axis
從cross-start
到cross-end
。
容器默認有兩根軸的,水平的主軸main axis
和垂直的交叉軸cross axis
,從main-start
到main-end
叫(main start
)主軸;從cross axis
從cross-start
到cross-end
叫(cross axis
)交叉軸
單個項目佔據的主軸空間叫main size
,佔據的交叉軸空間叫cross size
container
彈性容器:
.container {
display: flex;
}
items
彈性項目:
容器的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction屬性決定的是主軸的方向,即是項目的排列方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
.flex-container {
-webkit-flex-direction: row; /_ Safari _/
flex-direction: row;
}
.flex-container {
-webkit-flex-direction: row-reverse; /_ Safari _/
flex-direction: row-reverse;
}
.flex-container {
-webkit-flex-direction: column; /_ Safari _/
flex-direction: column;
}
.flex-container {
-webkit-flex-direction: column-reverse; /_ Safari _/
flex-direction: column-reverse;
}
其使用flex-direction
的box
格式如下:
// 水平
.box {
flex-direction: row;
}
// 水平倒置
.box {
flex-direction: row-reverse;
}
// 垂直
.box {
flex-direction: column ;
}
// 垂直倒置
.box {
flex-direction: column-reverse;
}
.box {
width: 400upx;
height: 300upx;
background-color: #007AFF;
margin: 10upx;
}
.item {
width: 80upx;
height: 80upx;
background-color: #1CBBB4;
border: 1upx solid #FFFFFF;
}
row
:flex
容器的主軸與當前寫入模式的內聯軸具有相同的方向。主開始方向和主結束方向分別相當於當前寫入模式的開始方向和結束方向。
.box-row {
display: flex;
flex-direction: row;
}
row-reverse
: 與'row'
相同,只是主開始方向和主結束方向交換了。
.box-row-reverse {
display: flex;
flex-direction: row-reverse;
}
column
: flex
容器的主軸與當前寫入模式的塊軸方向相同。主開始方向和主結束方向分別相當於當前書寫模式的前/頭和後/腳方向。
.box-column {
display: flex;
flex-direction: column;
}
column-reverse
: 與'column'
相同,只是主開始方向和主結束方向交換了。
.box-column-reverse {
display: flex;
flex-direction: column-reverse;
}
flex-wrap
屬性:根據伸縮容器中的可用空間,指定伸縮項是否換行以及它們換行到多行或多列的方向。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
.flex-container {
-webkit-flex-wrap: nowrap; /_ Safari _/
flex-wrap: nowrap;
}
.flex-container {
-webkit-flex-wrap: wrap; /_ Safari _/
flex-wrap: wrap;
}
.flex-container {
-webkit-flex-wrap: wrap-reverse; /_ Safari _/
flex-wrap: wrap-reverse;
}
flex-wrap: nowrap
: 不換行。(所有彈性項目都將在一行上)
.box-flex-wrap-nowrap {
display: flex;
flex-wrap: nowrap;
}
flex-wrap: wrap
: 換行,第一行在上方。(彈性項目將從上到下纏繞在多行上)
.box-flex-wrap-wrap {
display: flex;
flex-wrap: wrap;
}
wrap-reverse
: 換行,第一行在下方。(彈性項目將從下到上纏繞在多行上)
.box-flex-wrap-wrap-reverse {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow
屬性是flex-direction
屬性和flex-wrap
屬性的簡寫形式,默認值爲row nowrap
。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
.container {
flex-flow: column wrap;
}
.box-flex-flow-1 {
display: flex;
flex-flow: auto; // flex-flow: row nowrap;
}
.box-flex-flow-2 {
display: flex;
flex-flow: row wrap;
}
justify-content
屬性:指定在解析了任意靈活長度和自動邊距後,伸縮項如何沿伸縮容器的主軸對齊。(定義了項目在主軸上的對齊方式)
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start
初始值。伸縮項目被打包在行首。第一個伸縮項的起始邊被放置在伸縮容器的開始處。下一個伸縮項的起始邊與第一個伸縮項的結束邊按佈局軸方向依次放置。所有沿佈局軸保留的空間都放置在佈局軸的末端。
.box-flex-justify-content-1 {
display: flex;
justify-content: flex-start;
}
如圖效果:
flex-end
彈性物品被打包到行尾。第一個伸縮項的結束邊緣被放置在伸縮容器的末端。下一個伸縮項目的結束邊緣與第一個伸縮項目的開始邊緣按佈局軸方向依次放置。沿佈局軸剩下的所有空間都放置在佈局軸的起點。
.box-flex-justify-content-2 {
display: flex;
justify-content: flex-end;
}
如圖效果:
center
彈性物品被打包在線的中間。flex
項目在直線上放置沖洗彼此對齊線的中心,與等量的main-start
邊緣之間的空白行和第一項之間的線,主要目的的邊緣線,最後一項。(如果剩餘的空閒空間是負的,伸縮項將在兩個方向上相等地溢出。)
.box-flex-justify-content-3 {
display: flex;
justify-content: center;
}
如圖效果:
space-between
彈性項目均勻地分佈在這條線上。如果剩餘的自由空間是負的,或者一行上只有一個flex
項目,這個值與' flex-start '
相同。否則,main-start
保證的第一flex
項目線的邊緣放置充裕的main-start
邊緣線,最後一個flex
項的主要目的利潤邊緣線放置充裕的主要目的邊緣線,和其餘的flex
項目的分佈之間的間距與任何兩個相鄰物品是一樣的。
.box-flex-justify-content-4 {
display: flex;
justify-content: space-between;
}
如圖效果:
space-around
彈性項目均勻地分佈在線中,在兩端有一半大小的空間。如果剩餘的自由空間是負的,或者一行上只有一個伸縮項,這個值與' center '
相同。否則,行上的伸縮項的分佈使行上任意兩個相鄰伸縮項之間的間距相同,並且第一個/最後一個伸縮項與伸縮容器邊緣之間的間距爲伸縮項之間間距的一半。
.box-flex-justify-content-5 {
display: flex;
justify-content: space-around;
}
如圖效果:
space-evenly
:分配項目,以使任意兩個項目之間的間距(以及到邊緣的間距)相等。
align-items
屬性:指定伸縮容器中伸縮項的對齊值(垂直於由伸縮方向屬性定義的佈局軸)。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
修改item
樣式如圖:
.item1 {
width: 100upx;
height: 120upx;
}
.item2 {
width: 100upx;
height: 130upx;
}
.item3 {
width: 100upx;
height: 140upx;
}
flex-start
:交叉軸的起點對齊。
.box-flex-align-items-1 {
display: flex;
align-items: flex-start;
}
flex-end
:交叉軸的終點對齊。
.box-flex-align-items-2 {
display: flex;
align-items: flex-end;
}
center
:交叉軸的中點對齊。
.box-flex-align-items-3 {
display: flex;
align-items: center;
}
baseline
: 項目的第一行文字的基線對齊。
修改item
,以第一行文字的基線對齊,想如圖效果,itme3-text
頂部沒有剩餘空間,就被強迫這樣了。如果有空間,已第一個爲標準對齊,第一個item
文本底線對齊。
.item1-text {
padding: 5upx;
width: 120upx;
height: 120upx;
}
.item2-text {
width: 120upx;
height: 130upx;
}
.item3-text {
padding: 15upx;
width: 120upx;
height: 140upx;
}
.box-flex-align-items-4 {
display: flex;
align-items: baseline;
}
stretch
(默認值):如果項目未設置高度或設爲auto
,將佔滿整個容器的高度。
修改item
,沒有定義高度,如果有高度還是按照原來的高度呈現。
.item-noheight {
width: 100upx;
border: 1upx solid #FFFFFF;
}
.box-flex-align-items-5 {
display: flex;
align-items: stretch;
}
align-content
屬性:指定當與flex-direction
屬性定義的軸垂直的軸上有額外空間時,flex
項目的行如何在flex
容器內對齊。
align-content
屬性定義了多根軸線(多行)的對齊方式。如果項目只有一根軸線,該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start
:交叉軸的起點對齊
flex-end
:與交叉軸的終點對齊
center
:與交叉軸的中點對齊
space-between
:與交叉軸兩端對齊,軸線之間的間隔平均分佈
space-around
:每根軸線兩側的間隔都相等,軸線之間的間隔比軸線與邊框的間隔大一倍
stretch
:軸線佔滿整個交叉軸
項目的屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
屬性定義項目的排序時,數值越小,排列越靠前,默認爲0
.item {
order: <integer>;
}
flex-grow
屬性定義項目的放大比例,默認爲0,如果還有存在剩餘空間,也不會放大
如果所有項目的flex-grow
屬性都爲1,那麼它們將等分剩餘的空間,如果一個項目的flex-grow
屬性爲2,其他項目都爲1,那麼前者佔據的剩餘空間將比其他項目多一倍。
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink
屬性定義了項目的縮小的比例,默認爲1,如果空間不足,該項目將縮小
如果所有項目的flex-shrink
屬性都爲1,當空間不足時,都將等比例縮小,如果一個項目的flex-shrink
屬性都爲0,其他項目都爲1,則空間不足時,前者不縮小,負值對該屬性無效。
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis
屬性:定義了在分配多餘空間之前,項目佔據的主軸空間main size
,瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的默認值爲auto
,即是項目的本來的大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
flex
屬性是flex-grow
,flex-shrink
和flex-basis
的簡寫,默認值爲0 1 auto
,後兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值:auto
(1 1 auto
)和none
(0 0 auto
)
align-self
屬性:允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items
屬性,默認值爲auto
,表示繼承父元素的align-items
屬性,如果沒有父元素,則等同於stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
點贊、收藏和評論
我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出☞謝謝,一起學習了)