應用在父元素上-flex box
1. 模型
display: flex(盒子模型)
定義父元素為flex元素
2. 方向
flex-direction (子元素的排列方向)
- row (默認值): 從主軸起點到到主軸終點
- row-reverse: 從主軸終點到主軸起點
- column: 從側軸起點到側軸終點
- column-reverse: 從側軸終點到側軸起點
3. 換行
flex-wrap(子元素在主軸上鋪滿時,是否換行)
- Nowrap(默認值): 不換行
Flex容器能容納所有的子元素(Flex項目)排列,即使瀏覽器出現了水平滾動條(當Flex容器中添加了很多個Flex項目,至使Flex容器的寬度大于視窗寬度)。- Wrap:換行且從頂部到到底部排列
- Wrap-reverse:換行且從底部到到頂部排列
當你希望Flex容器內的Flex項目達到一定數量時,能換行排列。
當Flex容器中沒有足夠的空間放置Flex項目(Flex項目默認寬度),
4. 組合 方向 換行
flex-flow(默認值 Flex-flow: row nowrap;)
flex-flow : flex-direction flex-wrap
5. 水平對齊
justify-content(沿著主軸對齊,分配剩下多余的空閑空間)
- flex-start (默認值): flex項目從主軸起點開始無空閑空間地排列在一起
- flex-end: flex項目從主軸終點開始無空閑空間地排列在一起
- center: flex項目排列在主軸中間,兩邊空閑空間均勻分批
- space-between: 在主軸上的空閑空間均勻地分配到每兩個flex項目中間
- space-around: 在主軸上每個flex項目兩邊都分配一樣的空間
6. 垂直對齊
align-items(側軸對齊方式)
- stretch (默認值):把所有的元素伸開,所有flex項目的高度以最高的flex項目為準
- flex-start: 在主軸上排列的flex項目頂部,對齊側軸的起點
- flex-end: 在主軸上排列的flex項目底部,對齊側軸的終點
- center: 在主軸上排列的flex項目中部,對齊側軸的中間
- baseline: flex項目沿著自己的基線對齊
7. 多行垂直對齊
align-content(當出現多行flex項目時,側軸方向對齊方式)
- stretch (默認值): flex盒子和flex項目沒設置高度時,盒子高度以高度最高的flex項目為準
- flex-start: 多行flex項目頂部對準側軸起點
- flex-end: 多行flex項目底部對準側軸終點
- center: 多行flex項目中部對準側軸中間,空閑空間均勻分配打破多行flex項目兩邊
- space-between:側軸方向上,空閑空間均勻分配到每兩行flex項目的中間
- space-around: 側軸方向上,空閑空間均勻分配到每行flex項目的兩邊
應用在子元素-flex項目
1.排序
Order(排序)
- 默認情況下,所有Flex項目的order值都是0
- 可以正負值,設置子元素排列的先后順序號
- 如果兩個以下Flex項目有相同的order值時,Flex項目重新排序是基于HTML源文件的位置進行排序。
2.伸展
flex-grow(伸展)
- 默認情況下,flex-grow屬性值設置為0。表示Flex項目不會增長,填充Flex容器可用空間。表示flex-grow屬性沒有使用。
- 如果只有一個子元素設置了flex-grow的值,則這個子元素分配剩下的所有的空閑空間。如果你試著調整你瀏覽器的大小,Flex項目也會放大,以適應新的屏幕寬度。
- 如果多個子元素設置了flex-grow的值,則按照值的比例來分配剩下的空閑空間。
3. 收縮
flex-shrink(收縮)
- 默認情況下,flex-shrink的值是1,也就是說flex-shrink開關也是打開的。
- 如果你試著調整你瀏覽器的大小,Flex項目也會放大,以適應新的屏幕寬度。
- 按照子元素設置的flex-shrink值,來按比例收縮flex項目。
4. 初始寬度
flex-basis(初始寬度)
- 指定flex項目的初始寬度大小,可以是比例也可以是長度單位。
默認的值是auto。- flex-basis可以取任何用于width屬性的任何值。Flex項目寬度的計算是基于內容的多少來自動計算(很明顯,加上了padding值)。
- 這意味著,如果你增加Flex項目中的內容,它可以自動調整大小。
- 然而,如果你想將Flex項目設置一個固定的寬度,現在Flex項目的寬度受到了限制。
- 值為0,內容不考慮周圍的額外空間。
- 注意:如果flex-basis屬性的值是0時,也需要使用單位。
即flex-basis: 0px不能寫成flex-basis:0
5. 垂直位置和垂直伸展
align-self(控制單個flex項目側軸的位置和高度)
- auto
是將目標Flex項目的值設置為父元素的 align-items值,或者如果該元素沒有父元素的話,就設置為 stretch。繼承父元素的 align-item 值。- flex-end
將目標項目(Flex項目)對齊到Cross-Axis的末端。- center
將目標項目(Flex項目)對齊到Cross-Axis的中間。- stretch
會將目標項目拉伸,以沿著Cross-Axis填滿Flex容器的可用空間(Flex項目高度和Flex容器高度一樣)。- baseline
將目標項目沿著基線對齊。它與flex-start的效果看起來是一樣的,不過我相信你理解了基線是什么。因為前面已經解釋過。
6. 組合 膨脹 收縮 初始寬度
flex:flex-grow flex-shrink flex-basis
- flex:0 1 === flex: 膨脹 收縮 (無值時,默認為0)
flex默認屬性值以及所有的Flex項目都是默認行為
不伸展,會收縮- flex:0 0 auto === flex:none
試著縮放一下瀏覽器,你會注意到彈性項目不會收縮其寬度。它們從父元素中突出來了,要看到所有內容,必須橫向滾動瀏覽器。- flex: 1 1 auto === flex: auto
還是按我前面立的規矩。即,自動計算初始化寬度,但是如果有必要,會伸展或者收縮以適應整個可用寬度。
此時,項目會填滿可用空間,在縮放瀏覽器時也會隨之收縮。- flex: 2 1 0 === flex: 2
2 表示任何正數
絕對項目 相對項
1. 絕對項目
Flex:膨脹寬度 收縮寬度
如果你只設置了flex-grow和flex-shrink值,flex-basis可能是默認值0。這就是所謂的絕對flex項目。
2. 相對項目
Flex:膨脹寬度 收縮寬度 初始寬度
只有當你設置了flex-basis,你會得到一個相對flex項目。
3. 絕對和相對Flex項目之間到底有啥區別
二者之間主要的區別在于間距及如何計算間距。
- 絕對Flex項目中,只根據 flex 屬性來計算,而不是內容。
flex-basisi:0- 一個相對Flex項目內的間距是根據它的內容大小來計算的。
flex-basis:auto
Margin:auto的作用
1. 使用margin:auto
第一個Flex項目使用margin:auto;前后
當在Flex項目上使用 margin: auto 時,左、右l兩邊會占據所有剩余空間。
讓一個Flex項目的兩邊都用自動外邊距對齊
margin-left: auto;
margin-right: auto;
2.Justufy-content屬性什么時候不起作用
當在一個Flex項目上使用自動外邊距(margin: auto)時,justify-content 屬性就不起作用了。
當用 flex-direction: column 時
項目的寬度填滿了空間
1. 高度
Flex(膨脹寬度、收縮寬度、初始寬度)屬性變成了(高度)
本質上,每個作用于橫向軸(即Main-Axis)上的 flex 屬性,現在都會作用于縱向上的新Main-Axis。它只是在方向上的一個切換。
影響Main-Axis的每一個屬性現在會影響新Main-Axis。像 flex-basis 這種會影響Main-Axis上Flex項目寬度的屬性,現在會影響項目的高度,而不是寬度。
2. 位置
Main-Axis是從上到下,Cross-Axis是從左到右。
Justify-content(水平位置)變成(垂直位置)
justify-content: center;flex項目垂直居中了
Align-items(垂直位置)變成(水平位置)
align-items: center;Flex項目已經水平居中了
瀏覽器bug
在有些瀏覽器中,會有一個 bug,允許Flex項目收縮后比其內容尺寸小。這是個很古怪的行為。