一、FlexBox概念
FlexBox翻譯為彈性盒子。- 彈性盒子是一種用于按行或按列布局元素的一維布局方式。
- 元素可以膨脹以填充額外的空間，收縮以適應更小的空間。
- 我們使用
FlexBox來進行布局的方案稱為flex布局。
二、flex布局的重要概念
- 兩個重要的概念
- 開啟
flex布局的元素叫做flex container flex container里面的子元素叫做flex item
- 開啟
- 當
flex container中的子元素變成flex item時，具備以下特點flex item的布局將受到flex container屬性設置來控制和布局。flex item不再嚴格區分塊元素和行內級元素。flex item默認情況下是包裹 內容的，但是可以設置寬度和高度。
- 設置
display屬性為flex或者inline-flex可以為flex container。flex：flex container以block-level形式存在。inline-flex：flex container以inline-level形式存在。
- 案例1：設置
display屬性為flex
<!DOCTYPE html>
<html><head><title>Document</title><style>.box {display: flex;background-color: aqua;}</style></head><body>AAA<div class="box"><div class="item">box1</div><div class="item">box2</div><div class="item">box3</div><div class="item">box4</div></div>BBB</body>
</html>
- 案例2：設置
display屬性為inline-flex
<!DOCTYPE html>
<html><head><title>Document</title><style>.box {display: inline-flex;background-color: aqua;}</style></head><body>AAA<div class="box"><div class="item">box1</div><div class="item">box2</div><div class="item">box3</div><div class="item">box4</div></div>BBB</body>
</html>
三、flex的布局模型
- 默認以
main axis方向排序
- 應用在
flex container上的css屬性flex-flowflex-directionflex-wrapjustify-contentalign-itemsalign-content
- 應用在
flex item上的css屬性flex-growflex-basisflex-shrinkorderalign-selfflex
四、應用在 flex container 上的 css 屬性
1、flex-direction
flex itsms默認都是沿著main axis（主軸）從main start開始往main end方向排布-
flex-direction決定了main axis的方向，有四個取值
-
row（默認值）
-
row-reverse：row的反轉
-
column：列成為主軸方向
-
column-reverse：列主軸反轉
-
-
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;/* 修改主軸的方向 *//* flex-direction: row; 默認值 *//* flex-direction: row-reverse; *//* flex-direction: column; */flex-direction: column-reverse;}.item {width: 100px;height: 100px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div></div></body>
</html>
2、flex-wrap
-
flex-wrap決定了flex container顯示單行還是多行。
-
nowrap：（默認值）單行
-
wrap：多行
-
wrap-reverse：多行（對比wrap，cross start與 ）
-
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;/* 決定了 flex container 顯示單行還是多行。 *//* flex-wrap: nowrap;默認值 *//* flex-wrap: wrap; */flex-wrap: wrap-reverse;}.item {width: 100px;height: 100px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item1">box5</div><div class="item item2">box6</div><div class="item item3">box7</div><div class="item item4">box8</div></div></body>
</html>
3、flex-flow
-
flex-flow屬性是flex-direction和flex-wrap的縮寫。
- 順序任何，并且都可以省略
- 順序任何，并且都可以省略
4、justify-content
justify-content決定了flex item在main axis上的對齊方式-
flex-start：（默認值）與main start對齊
-
flex-end：與main end對齊
-
center： 居中
-
space-between：flex items之間的距離相等- 與
main start、main end兩端對齊
-
space-around：flex items之間的距離相等flex items與main start、main end之間的距離是flex items之間距離的一半
-
space-evenly：flex items之間的距離相等flex items與main start、main end之間的距離是flex items之間的距離
-
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;/* justify-content 決定了 flex item 在 main axis 上的對齊方式 *//* justify-content: flex-start; 默認值 *//* justify-content: flex-end; *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-around; */justify-content: space-evenly;}.item {width: 100px;height: 100px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>
5、align-item
align-item決定了flex items在cross axis上的對齊方式
-
-
normal：彈性布局中，效果和strench一樣
-
stretch：當flex items在cross axis方向的size為auto時候，會自動拉伸至填充flex container
-
flex-start：與cross start對齊
-
flex-end：與cross end對齊
-
center：居中對齊
-
baseline：于基準線對齊
-
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;align-items: normal;/* align-items: stretch; *//* align-items: flex-start; *//* align-items: flex-end; *//* align-items: baseline; */}.item {width: 100px;height: 100px;background-color: aquamarine;height: auto;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>
6、align-content
-
align-content決定了多行flex items在cross axis上的對齊方式，用法和justify-content類似
-
stretch：（默認值），與align-item的stretch類似
-
flex-strat：與cross start對齊
-
flex-end：與cross end對齊
-
center：居中對齊
-
space-between：flex items之間的距離相等flex items與cross start和cross end對齊
-
space-around：flex items之間的距離相等flex items與cross start和cross end之間的距離是flex items之間距離的一半
-
space-evenly：flex items之間的距離相等flex items與cross start和cross end之間的距離 等于flex items之間的距離
-
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;flex-wrap: wrap;align-content: stretch;/* align-content: flex-start; *//* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* align-content: space-evenly; */}.item {width: 120px;height: 120px;height: auto;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item1">box5</div><div class="item item2">box6</div><div class="item item3">box7</div><div class="item item4">box8</div><div class="item item1">box9</div><div class="item item2">box10</div><div class="item item3">box11</div><div class="item item4">box12</div></div></body>
</html>
五、應用在 flex item 上的 css 屬性
1、order
-
order決定了flex item的排列順序
- 可以設置任意整數（正整數、負整數、0），值越小就越
- 數字越小，位置越靠前；數字越大，位置越靠后
- 默認值是
0
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;flex-wrap: wrap;}.item {width: 120px;height: 120px;background-color: aquamarine;}.item1 {background-color: orange;order: 2;}.item2 {background-color: red;order: 3;}.item3 {background-color: blueviolet;order: 1;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div></div></body>
</html>
2、align-self
-
flex-items可以通過align-self覆蓋flex container設置的align-items
-
auto：遵從flex container設置的align-items
-
可以設置的值，效果和
align-items一致-
stretch
-
flex-start
-
flex-end
-
center
-
baseline
-
-
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {width: 120px;height: 120px;background-color: aquamarine;}.item1 {background-color: orange;/* align-self: center; */}.item2 {background-color: red;/* align-self: auto; *//* align-self: stretch;height: auto; *//* align-self: flex-start; *//* align-self: flex-end; *//* align-self: center; */align-self: baseline;}.item3 {background-color: blueviolet;/* align-self: center; */}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>
3、flex-grow
-
flex-grow決定了flex items如何拓展（拉伸、增長）
- 可以設置任意非負數（正小數、正整數、
0），默認值是0 - 當
flex container在main axis上有剩余size時，flex-grow才會生效
- 如果所有
flex items的flex-grow總和sum超過1，每個flex item拓展的 size 為：flex container 的剩余 size * ( flex-grow / sum )
- 可以設置任意非負數（正小數、正整數、
-
flex items拓展后的最終size不能超過max-width/max-height
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {width: 120px;height: 120px;background-color: aquamarine;}.item1 {background-color: orange;flex-grow: 2;}.item2 {background-color: red;flex-grow: 0.2;}.item3 {background-color: blueviolet;flex-grow: 0.5;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>
4、flex-shrink
-
flex-shrink決定了flex items如何收縮（縮小）- 可以設置任意非負數（正小數、正整數、
0），默認值是1 - 當
flex items在main axis上 超過了flex container的size時，flex-shrink才會生效
- 可以設置任意非負數（正小數、正整數、
-
如果所有
flex items的flex-shrink總和sum超過1，每個flex item收縮的 size 為：flex items超出flex container 的 size*收縮比例（flex-shrink） / sum -
flex items收縮后的最終size不能超過min-width/min-height
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {width: 120px;height: 120px;background-color: aquamarine;/* flex-shrink: 0; */}.item1 {background-color: orange;}.item2 {background-color: red;flex-shrink: 5;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item1">box5</div><div class="item item2">box6</div><div class="item item3">box7</div></div></body>
</html>
5、flex-basis
flex-basis用來設置flex items在main axis方向上的base sizeauto：默認值- 具體的寬度數值（100px）
- 決定
flex-basis最終 base size 的因素，優先級從高到低：max-width、max-height、min-width、min-heightflex-basiswidth、height- 內容本身的
size
6、flex屬性
-
flex屬性是flex-grow、flex-shrink、flex-basis的簡寫，flex可以指定1個、2個或者3個值。
-
單值語法，值必須是以下其中之一：
-
一個無單位數（
<number>）：它會被當作flex-grow的值
-
一個有效寬度值（
width）：它會被當作flex-basis的值 -
關鍵字：
none、auto或initial
-
-
雙值語法，第一個值必須為一個無單位數（
<number>），并且會被當作flex-grow的值- 第二個值必須是以下之一：
- 一個無單位數，它會被當作
flex-shrink的值 - 一個有效寬度值（
width）：它會被當作flex-basis的值
- 一個無單位數，它會被當作
- 第二個值必須是以下之一：
-
三值語法：
- 第一個值必須是一個無單位數（
<number>），并且它會被當作flex-grow的值 - 第二個值必須是一個無單位數（
<number>），并且它會被當作flex-shrink的值 - 第三個值必須是一個有效寬度值（
width），并且它會被當作flex-basis的值
- 第一個值必須是一個無單位數（
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {/* width: 120px; */height: 120px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;/* flex: auto; *//* flex: none; *//* flex: initial; *//* flex: 2; *//* flex: 0.5 200px; */flex: 0.6 1 10px;}.item3 {background-color: blueviolet;/* flex: 3; *//* flex: 15px; */}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div></div></body>
</html>
六、flex布局中使用justify-content后，最后一行的布局問題
1、問題
-
想要的結果：
-
使用
justify-content: space-between;后實際結果：
2、解決方法
- 在最后追加
n個span元素。n 的值 = 列數 - 2。 - 設置
span元素的寬度 =flex item的寬度
※ span 換成 i 元素也行。
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;}.item {width: 150px;height: 150px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}.container span {width: 150px;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item4">box5</div><div class="item item3">box6</div><div class="item item2">box7</div><div class="item item1">box8</div><!-- 列數- 2 = 追加的span個數 --><span></span></div></body>
</html>
)
