一、Flex布局是什么？??
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，
任何一個容器都可以指定為flex布局：
.box{
display: flex;
}
行內元素也可以使用 Flex 布局：
.box{
display: inline-flex;
}
Webkit 內核的瀏覽器，必須加上-webkit前綴：
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
??Flex布局與傳統布局對比：
傳統布局：
- 兼容性好
- 布局繁瑣
- 局限（不能在移動端很好的布局）
FLex布局：
- 操作方便，布局簡單，移動端廣泛應用
- PC端瀏覽器支持較差
- IE11或更低版本不支持或部分支持
??Flex布局原理：
--通過給父元素添加flex屬性來控制子元素的位置和排列方式
??注意：設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效，
二、基本概念??
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"，它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱"專案"，
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end、
專案默認沿主軸排列，單個專案占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size
三、容器屬性??
1）flex-direction：設定主軸方向
2）justify-content：設定主軸上的子元素排列方式
3）flex-wrap：設定子元素是否換行
4）align-content：設定側軸上子元素排列方式（多行）
5）align-items：設定側軸上子元素排列方式（單行）
6）flex-flow：復合屬性，同時設定了flex-direction和flex-wrap
3.1 flex-direction??
flex-direction屬性決定主軸的方向（即專案的排列方向）
語法：
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
屬性值：
row：默認值，主軸為水平方向，起點在左端，row-reverse：主軸為水平方向，起點在右端，column：主軸為垂直方向，起點在上沿，column-reverse：主軸為垂直方向，起點在下沿，
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; /* 設定容器內部元素排列方向 */ flex-direction: row; } .box{ width: 120px; height: 120px; } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> </div> </body> </html>
示例效果：
3.2 flex-wrap??
默認情況下，專案都排在一條線（又稱"軸線"）上，
flex-wrap屬性定義，如果一條軸線排不下，如何換行，
語法：
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
屬性值：
nowrap（默認）：不換行wrap：換行，第一行在上方wrap-reverse：換行，第一行在下方
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; /* 設定容器內部元素排列方向 */ flex-direction: row; /* 設定容器內部元素如何換行 */ flex-wrap: nowrap|wrap|wrap-reverse; } .box{ width: 120px; height: 120px; } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } .yellow{ background-color: yellow; } .orange{ background-color: orange; } .pink{ background-color: pink; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> <div class="box yellow">4</div> <div class="box orange">5</div> <div class="box pink">6</div> </div> </body> </html>
示例效果：
3.3 flex-flow??
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
語法：
.box { flex-flow: <flex-direction> || <flex-wrap>; }
.box{ flex-direction: row; flex-wrap: wrap-reverse; /* 等同于 */ flex-flow:row wrap-reverse }
3.4 justify-content??
justify-content屬性定義了專案在主軸上的對齊方式
語法：
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
屬性值：
flex-start（默認值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，專案之間的間隔都相等space-around：每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍space-evenly：均勻排列每個元素，每個元素之間的間隔相等
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; /* 設定容器內部元素排列方向 */ flex-direction: row; /* 設定容器內部元素如何換行 */ flex-wrap: wrap; /* 定義專案在主軸上的對齊方式 */ justify-content: flex-start | flex-end | center | space-between | space-around; } .box{ width: 120px; height: 120px; } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> </div> </body> </html>
示例效果：
3.5 align-items??
align-items屬性定義專案在交叉軸上如何對齊
語法：
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
屬性值：
flex-start：交叉軸的起點對齊，flex-end：交叉軸的終點對齊，center：交叉軸的中點對齊，baseline: 專案的第一行文字的基線對齊，stretch（默認值）：如果專案未設定高度或設為auto，將占滿整個容器的高度，
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; /* 設定容器內部元素排列方向 */ flex-direction: row; /* 設定容器內部元素如何換行 */ flex-wrap: wrap; /* 定義專案在交叉軸上的對齊方式 */ align-items: flex-start | flex-end | center | baseline | stretch; } .box{ width: 120px; height: 120px; } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } /* .yellow{ background-color: yellow; } .orange{ background-color: orange; } .pink{ background-color: pink; } */ </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> <!-- <div >4</div> <div >5</div> <div >6</div> --> </div> </body> </html>
示例效果：
3.6 align-content??
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（默認值）：軸線占滿整個交叉軸，
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; /* 設定容器內部元素排列方向 */ flex-direction: row; /* 設定容器內部元素如何換行 */ flex-wrap: wrap; /* 定義多根軸線的對齊方式(只有一行不起作用) */ align-content: flex-start | flex-end | center | space-between | space-around | stretch; } .box{ width: 120px; height: 120px; } .red{ background-color: red; font-size: 25px; } .blue{ background-color: blue; font-size: 30px; } .green{ background-color: green; font-size: 45px; } .yellow{ background-color: yellow; } .orange{ background-color: orange; } .pink{ background-color: pink; } </style> </head> <body> <div class="container"> <div class="box red">A</div> <div class="box blue">貳</div> <div class="box green">3</div> <div class="box yellow">4</div> <div class="box orange">5</div> <div class="box pink">6</div> </div> </body> </html>
示例效果：
四、專案屬性??
orderflex-growflex-shrinkflex-basisflexalign-self
4.1 order??
order屬性定義專案的排列順序，數值越小，排列越靠前，默認為0
語法：
.item {
order: <integer>;
}
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; /* 設定容器內部元素排列方向 */ flex-direction: row; /* 設定容器內部元素如何換行 */ flex-wrap: wrap; } .box{ width: 120px; height: 120px; } .red{ background-color: red; /* order數值越小專案越靠前 */ order: 2; } .blue{ background-color: blue; order: 0; } .green{ background-color: green; order: 1; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> </div> </body> </html>
示例效果：
4.2 flex-grow??
flex-grow屬性定義專案的放大比例，默認為0，即如果存在剩余空間，也不放大
語法：
.item { flex-grow: <number>; /* default 0 */ }
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; /* 設定容器內部元素排列方向 */ flex-direction: row; /* 設定容器內部元素如何換行 */ flex-wrap: wrap; } .box{ width: 120px; height: 120px; font-size: 50px; } .red{ /* flex-grow：定義專案的放大比例，默認為0 */ background-color: red; flex-grow: 1; /* 紅色將剩余空間占據 */ } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> </div> </body> </html>
示例效果：
總結：
- 如果所有專案的flex-grow屬性都為1，則所有專案平等分剩余空間，
- 如果一個專案的flex-grow屬性為2，其他專案為1，則前者占據的剩余空間將比其他多一倍
4.3 flex-shrink??
flex-shrink屬性定義專案的縮小比例，默認值為1，即如果空間不足，則當前專案縮小
語法：
.item { flex-shrink: <number>; /* default 1 */ }
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; } .box{ width: 230px; height: 120px; font-size: 50px; } .red{ background-color: red; } .blue{ background-color: blue; /* 定義專案的縮小比例，值為0則不縮小 */ flex-shrink: 0; } .green{ background-color: green; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> </div> </body> </html>
示例效果：
藍色div設定flex-shrink屬性為0，其他div默認為1，空間不足時該藍色div不會被壓縮
總結：
- 如果所有專案的flex-shrink屬性都為1，當空間不足時都將等比例縮小
- 如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時前者不會被縮小
- 負值對該屬性無效
4.4 flex-basis??
flex-basis屬性定義了在分配多余空間之前，專案占據的主軸空間（main size），瀏覽器根據這個屬性，計算主軸是否有多余空間，它的默認值為auto，即專案的本來大小
設定元素固定或自動空間的占比！
語法：
.item { flex-basis: <length> | auto; /* default auto */ }
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; } .box{ width: 120px; height: 120px; font-size: 50px; } .red{ background-color: red; /* 設定元素固定空間占比 */ flex-basis: 15rem; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> </div> </body> </html>
示例效果：
設定紅色div剩余空間占比為15rem，也可以設定為px，這樣就可以不用占據所有剩余空間
4.5 flex??
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，默認值為0 1 auto，后兩個屬性可選
語法：
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
一般放大比例直接設定：
.item { flex: 1 }
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)，
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值，
4.6 align-self??
align-self屬性允許 單個專案有與其他專案不一樣的對齊方式，可覆寫align-items屬性，
默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch，
語法：
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
完整示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ border: 1px solid #000000; width: 500px; height: 600px; margin: 0 auto; /* 定義flex容器 */ display: flex; } .box{ width: 120px; height: 120px; font-size: 50px; } .red{ background-color: red; align-self: flex-end; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <div class="container"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box green">3</div> </div> </body> </html>
示例效果：
設定紅色div的align-self屬性為flex-end，則它將在交叉軸的終點對齊
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致
參考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15705585.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/397194.html
標籤：Html/Css