Flex知識小結
簡介
flex 容器預設存在兩根軸主軸(main axis): 預設水平,可通過設定flex-direction改變主軸方向。
交叉軸(cross axis): 預設垂直。
主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;
交叉軸的開始位置叫做cross start,結束位置叫做cross end
專案預設沿主軸排列
單個專案佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size。
複製程式碼
1. flex-direction
決定主軸的方向(即專案的排列方向)。
預設為row(水平軸),設定為column則為垂直軸。
當有reverse時,主軸起點和終點交換位置。
row
(預設值): 主軸為水平方向,起點在左端。row-reverse
: 主軸為水平方向,起點在右端。column
: 主軸為垂直方向,起點在上沿。column-reverse
: 主軸為垂直方向,起點在下沿。
對於下面的例子:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul{
display: flex;
flex-direction: row;
}
ul>li{
width:100px;
height:50px;
background:#ffff00;
border:1px red solid;
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
複製程式碼
1)flex-direction: row
從左邊向右依次排開(截圖中紅色框指空白部分)。
2)flex-direction: row-reverse
從右邊向左依次排開。
3)flex-direction: column
從上邊向下依次排開。
4)flex-direction: column-reverse
從下邊向上依次排開。
2. flex-wrap
專案預設都排在主軸上,如果一行排不下,如何換行?可用flex-wrap屬性設定。
nowrap
: 不換行wrap
: 換行,第一行在上方wrap-reverse
: 換行,第一行在下方
1)flex-wrap: nowrap
每個專案依次排開不換行(每個專案寬度固定時,按照寬度依次放置,如果專案過寬一行放不下,且內部元素不會撐開容器時,會導致壓縮,如果內部元素撐開容器會出現滾動條,如果上個例子li的寬度改為600px,實際只有400++px , 壓縮原因參考7.flex屬性 )。
2)flex-wrap: wrap
依次排開,一行不夠換行展示。
flex-wrap:wrap
類似浮動float(當flex-direction為row-reverse時,類似float:right
)。
與浮動有一點不同,flex佈局每一行高度都是一行所有專案中最高專案的高度,即每一行高度一致,就像給每一行巢狀一個div,這個div巢狀的專案個數取決於裝置,多麼厲害的佈局,這種佈局防止頁面錯亂。
而float每個專案高度不同,可能會導致頁面錯亂。根據float
的定義,我們知道,它是浮在頁面上方,換行時可能不是從頁面最左側開始排列,這取決於上一行最右邊專案的高度和寬度等,而flex佈局換行都是從最左側排列。
下面用一個示例解釋這個問題,把第1個專案高度改為60px(其他都是50px)。
flex佈局示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul{
display: flex;
flex-direction: row;
}
ul>li{
width:100px;
height:50px;
background:#ffff00;
border:1px red solid;
display: inline-block;
}
ul>li:first-child{
height: 60px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
複製程式碼
float佈局示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul>li{
float: left;
width:400px;
height:50px;
background:#ffff00;
border:1px red solid;
display: inline-block;
}
ul>li:first-child{
height: 60px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
複製程式碼
跟float的區別在下面兩個圖中可以看出來,flex的專案4在1下方,而float的專案4貼在2的下面。如果把專案1高度改為20px,兩者沒有差別。
3)flex-wrap: wrap-reverse
這個更厲害了,換行且第一行在最下面。我的理解是這樣,我們往地上一點點放盒子(這些盒子高度可能不同),一行放滿之後放一個擋板,在上面繼續放盒子,而flex-wrap:wrap是從上面放,一行放不下時,放個擋板,第二行繼續放。
3. flex-flow
flex-flow屬性就是flex-direction和flex-wrap的簡寫形式,預設值為row nowrap。不再多解釋。
.box {
flex-flow:row-reverse wrap;
}
複製程式碼
4. justify-content
justify-content 定義了專案在主軸上的對齊方式,即每一行的排布方式,當每個專案寬度都不相同時設定專案間隔和整體位置。
flex-start
(預設值): 左對齊flex-end
: 右對齊center
: 居中space-between
: 兩端對齊,專案之間的間隔都相等。space-around
: 每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。
1)justify-content: flex-start
左對齊(預設)。
2)justify-content: flex-end
右對齊。
3)justify-content:center
居中。
4)justify-content: space-between
兩端對齊,專案之間的間隔都相等。專案與邊框無間距。
5)justify-content: space-around
每個專案兩側的間隔相等。專案之間的間隔比專案與邊框的間隔大一倍。
5. align-items
align-items屬性定義專案在交叉軸上如何對齊,即每一行專案高度不同時設定該屬性改變佈局。
flex-start
: 交叉軸的起點對齊。flex-end
: 交叉軸的終點對齊。center
: 交叉軸的中點對齊。baseline
: 專案的第一行文字的基線對齊。stretch
(預設值): 如果專案未設定高度或設為auto,將佔滿整個容器的高度。
1)align-items: flex-start
交叉軸的起點對齊(在本例中是上對齊)。
2)align-items:flex-end
交叉軸的終點對齊(在本例中是下對齊)。
3)align-items:center
交叉軸的中點對齊(居中)。
4)align-items:baseline
專案的第一行文字的基線對齊,本例給專案2增加padding-top,如下圖,文字1/2/3對齊。
5)align-items:stretch
如果專案未設定高度或設為auto,將佔滿整個容器的高度,我們試圖把專案3設定height:auto,如下圖,它會撐滿整個高度,這個也十分有用。
6. align-content
定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。align-content類似justify-content,只不過justify-content定義主軸對齊方式,而align-content是定義交叉軸的對齊方式。
The align-items property will align the items on the cross axis.
複製程式碼
flex-start
: 與交叉軸的起點對齊。flex-end
: 與交叉軸的終點對齊。center
: 與交叉軸的中點對齊。space-between
: 與交叉軸兩端對齊,軸線之間的間隔平均分佈。space-around
: 每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。- stretch(預設值): 軸線佔滿整個交叉軸。
下面所有示例把flex容器高度改為300px,結合上面說到的justify-content的示例,即可明白:
1)align-content:flex-start
與交叉軸的起點對齊。
2)align-content:flex-end
與交叉軸的終點對齊。
3)align-content:center
與交叉軸的中點對齊(面試垂直居中的一種方法)。
4)align-content:space-between
與交叉軸兩端對齊,軸線之間的間隔平均分佈。
5)align-content:space-around
每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
6)align-content:stretch(預設值)
軸線佔滿整個交叉軸。這個暫時沒想到好的例子說明。
7. flex
設定flex屬性,會根據屬性的比例進行劃分。
佈局空白 available space,這幾個 flex 屬性的作用其實就是改變了 flex 容器中的佈局空白的行為。
Where the flex-grow property deals with adding space in the main axis,
the flex-shrink property controls how it is taken away.
If we do not have enough space in the container to lay out our items and
flex-shrink is set to a positive integer the item can become smaller than the flex-basis.
複製程式碼
包含三個屬性:flex-grow flex-shrink flex-basis
flwx-basis
定義了該元素的佈局空白(available space)的基準值。flex-grow
若被賦值為一個正整數, flex 元素會以 flex-basis 為基礎,沿主軸方向增長尺寸。flex-shrink
若被賦值為一個正整數, flex 元素會以 flex-basis 為基礎,沿主軸方向jians尺寸。
flex預定義值:
flex: initial = flex:0 1 auto
flex: auto = flex:1 1 auto
flex: none = flex: 0 0 auto
flex: <positive-number>
複製程式碼
flex詳解:www.w3.org/TR/2017/CR-…
其他
-
設為 Flex 佈局以後,子元素的 float、clear 和 vertical-align 屬性將失效。
-
主軸的方向不一定是水平的,這個屬性就是設定主軸的方向,主軸預設是水平方向,從左至右,如果主軸方向設定完畢,那麼交叉軸就不需要設定,交叉軸永遠是主軸順時針旋轉 90°。