簡介
布局的傳統(tǒng)解決方案握爷，基于盒狀模型奴饮，依賴 display屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便迈倍，比如伤靠，垂直居中就不容易實現(xiàn)。2009年，W3C提出了一種新的方案—-Flex布局宴合，可以簡便焕梅、完整、響應式地實現(xiàn)各種頁面布局卦洽。
Flex是Flexible Box的縮寫贞言，意為”彈性布局”，用來為盒狀模型提供最大的靈活性阀蒂。
任何一個容器都可以指定為Flex布局该窗。
.box{
display: flex;
}
行內(nèi)元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit內(nèi)核的瀏覽器蚤霞，必須加上-webkit前綴酗失。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，設為Flex布局以后昧绣，子元素的float规肴、clear和vertical-align屬性將失效。
- 雖然 Flexbox 非常適合縮放夜畴，對齊和重新排序元素拖刃，但以下情況應該盡量避免使用 Flexbox 布局：
- 整體頁面布局
- 完全支持舊瀏覽器的網(wǎng)站
舊版瀏覽器，如IE 11或更低版本贪绘，不支持或僅部分支持 Flexbox 兑牡。如果你想安全的使用頁面正常呈現(xiàn)，你應該退回到其他的 CSS 布局方式税灌，比如結合float 的 display: inline-block 或者 display: table等发绢。但是，如果您只針對現(xiàn)代瀏覽器垄琐，那么 Flexbox 絕對值得一試边酒。
基本概念
采用Flex布局的元素，稱為Flex容器（flex container）狸窘，簡稱”容器”墩朦。它的所有子元素自動成為容器成員，稱為Flex項目（flex item）翻擒，簡稱”項目”氓涣。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start陋气，結束位置叫做main end劳吠；交叉軸的開始位置叫做cross start，結束位置叫做cross end巩趁。
項目默認沿主軸排列痒玩。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
屬性
- flex-direction
項目排列方向蠢古，默認橫向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
}
/* 以下為輔助樣式 */
.flex-container {
background-color: #F0f0f0;
}
.flex-container .flex-item {
padding: 20px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
</body>
</html>
flex-container添加：
flex-direction: column;
會顯示為縱向排列
也可以通過設置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項以相反的順序排列
注意：
正常排序和反向排序是對項目在容器里的代碼順序奴曙，不是按里面值排序，比如上例中第一個項目的內(nèi)容設置為2草讶，第二個設置為1洽糟，反向后會變成1，2
容器寬默認充滿父元素堕战，高由里面的項目高決定
沒有定義寬高的情況下坤溃，橫向排列時，項目的寬默認由里面的內(nèi)容決定嘱丢，高充滿容器
縱向排列時薪介，寬充滿容器，高由內(nèi)容決定
- justify-content
justify-content屬性定義了項目在主軸上的對齊方式屿讽。
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
效果：
row-reverse會讓容器里的項目按內(nèi)容反向排列，并且沿主軸右對齊吠裆，加上flex-end伐谈，又會使item左對齊
justify-content還可以設置為以下值：
flex-start | flex-end | center | space-between | space-around | space-evenly;
space-between：兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等试疙。所以诵棵，項目之間的間隔比項目與邊框的間隔大一倍。
space-evenly : flex 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等祝旷。
設置了justify-content后再還可以單獨設置item的margin：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 以下為輔助樣式 */
.flex-container {
background-color: #F0f0f0;
}
.flex-container .flex-item {
padding: 20px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="margin-right: 20px;margin-left: 400px;">3</div>
</div>
</body>
</html>
-
align-items
align-items屬性定義項目在交叉軸上如何對齊履澳。
align-items: flex-start | flex-end | center | baseline | stretch;
stretch：如果項目未設置高度或設為auto，交叉軸對齊方式默認值為stretch怀跛，將占滿整個容器的高度
flex-start：如果項目設置了高度距贷，交叉軸對齊方式默認值為 flex-start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center
}
.flex-container {
height: 60px;
background-color: #F0f0f0;
}
.flex-container .flex-item {
background-color: #B1FF84;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
可以在某個特定的 flex 項上使用 align-self CSS 屬性，來使該特定的 flex 項與容器中的其他 flex 項進行對齊吻谋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center
}
.flex-bottom {
align-self: flex-end
}
.flex-container {
height: 60px;
background-color: #F0f0f0;
}
.flex-container .flex-item {
background-color: #B1FF84;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item flex-bottom">3</div>
</div>
</body>
</html>
- flex-wrap
flex 項不允許多行/列排列忠蝗，如果 flex 容器尺寸對于所有 flex 項來說不夠大，那么flex 項將被調(diào)整大小以適應單行或列排列漓拾。
通過添加 flex-wrap: wrap 阁最，可以將溢出容器的 flex 項將被排列到另一行/列中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
flex-wrap: wrap;
width: 100px;
height: 60px;
background-color: #F0f0f0;
}
.flex-container .flex-item {
background-color: #B1FF84;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
</body>
</html>
- align-content
多行/列排列的 flex 項在交叉軸上的對齊方式
默認情況下，當 flex 容器的交叉軸（cross axis）上存在多余空間時骇两，您可以在 flex 容器上設置 align-content速种，以控制 flex 項在交叉軸（cross axis）上的對齊方式〉颓В可能的值是 flex-start配阵，flex-end，center，space-between闸餐，space-around 饱亮，space-evenly 和 stretch（默認）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-evenly;
}
.flex-container {
width: 100px;
height: 300px;
background-color: #F0f0f0;
}
.flex-container .flex-item {
background-color: #B1FF84;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item ">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
</body>
</html>
- flex-grow
任何情況下舍沙，item都會被container包裹近上，不會超過，如果container空間不夠拂铡，item會自動壓縮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
width: 50px;
}
/* 以下為輔助樣式 */
.flex-container {
background-color: #F0f0f0;
}
.flex-container .flex-item {
width: 50px;
text-align: center;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
</body>
</html>
上例中item的寬度會縮小到25px
flex-grow 只有在 flex 容器中有剩余空間時才會生效壹无。flex 項的 flex-grow 屬性指定該 flex 項相對于其他 flex 項將拉伸多少，以填充 flex 容器感帅。默認值為1斗锭。當設置為 0 時，該 flex 項將不會被拉伸去填補剩余空間失球。在這個例子中岖是，兩個項的比例是 1:2，意思是在被拉伸時实苞，第一個 flex 項將占用剩余空間的 1/3豺撑，而第二個 flex 項將占據(jù)剩余空間的2/3。(如果item不定義flex-grow黔牵，也不定義寬度聪轿，則item寬度由內(nèi)容決定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
width: 180px;
padding: 10px;
background-color: #F0f0f0;
}
.flex-item1 {
flex-grow: 0;
}
.flex-item2 {
flex-grow: 1;
}
.flex-item3 {
flex-grow: 2;
}
.flex-container .flex-item {
padding: 20px 0;
text-align: center;
width: 30px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item flex-item1">1</div>
<div class="flex-item flex-item2">2</div>
<div class="flex-item flex-item3">3</div>
</div>
</div>
</body>
</html>
上例中，item的寬度即使不定義猾浦，item2和item3也會拉升陆错，item1寬度由內(nèi)容決定
- flex-shrink:收縮：
flex-shrink 只有在 flex 容器空間不足時才會生效。它指定 flex 項相對于其他 flex 項將縮小多少金赦，以使 flex 項不會溢出 flex 容器音瓷。 默認值為 1。當設置為0時夹抗，該 flex 項將不會被收縮外莲。在這個例子中，比例是1：2兔朦，意思是在收縮時偷线，第一項將收縮 1/3 ，而第二個項目將被收縮 2/3 沽甥。注： flex-shrink 和 flex-grow 正好相反
.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}
案例
響應式菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/*Flexbox是一個相當優(yōu)秀的屬性声邦，它可能會成為未來版面布局的一部分。
如果考慮到只處理移動方面的摆舟，那么兼容性就可以忽略了亥曹。
-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome邓了、safari私有屬性*/
.navigation {
list-style: none;
margin: 0;
background: deepskyblue;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*多欄多列布局*/
-webkit-flex-flow: row wrap;
/*讓靈活的項目在必要的時候進行拆行*/
justify-content: flex-end;
}
.navigation a {
text-decoration: none;
display: block;
padding: 1em;
color: white
}
.navigation a:hover {
background: #00AEE8
}
@media all and (max-width:800px) {
.navigation {
justify-content: space-around
}
}
@media all and (max-width:600px) {
.navigation {
-webkit-flex-flow: column wrap;
padding: 0
}
}
/*寬度小于600的時候自動換行：*/
.navigation a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.navigation li:last-of-type a {
background: #00AEE8;
border-bottom: 0;
}
/*指定父元素的最后一個 li 元素的背景色： li:nth-child(3) li的第3個元素 li:first-child 父元素的第一個子元素li里的內(nèi)容*/
</style>
<body>
<ul class="navigation">
<li><a href="#">首頁</a></li>
<li><a href="#">簡介</a></li>
<li><a href="#">公司介紹</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</body>
</html>
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
默認情況下，每個flex項目的寬高由內(nèi)容決定
通過媒體查詢媳瞪，瀏覽器寬度小于800時骗炉，讓項目在主軸均勻分隔，小于600時蛇受，變?yōu)榭v向排列
