HTML和小程式的 flex 佈局
阿新 • • 發佈：2019-01-11
佈局的傳統解決方案，基於 盒狀模型（box model），依賴 display 屬性 + position 屬性 + float 屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。
網頁佈局（layout）之中的 彈性佈局( flexible box)，主要用來為 盒狀模型 提供最大的靈活性。
special items：
- flex container：採用 flex 佈局的元素；
- flex item：flex 專案，flex 容器的所有子元素會自動成為該容器的專案成員，即 flex 專案。
文章目錄
| 容器框架軸 | |
|---|---|
| 水平 | 主軸（main axis） |
| 垂直 | 交叉軸（cross axis） |
| **主軸（水平方向）**預設排列 | |
| 開始（left） | main start |
| 末尾（right） | main end |
| 交叉軸（垂直方向） |
|
| 開始（top） | cross start |
| 末尾（bottom） | cross end |
| 主軸空間 （width） | main size |
| 交叉軸空間 （height） | main height |
排列方向及換行
flex 屬性：flex-direction
<style> /* 基本語法*/
.box {flex-direction: column-reverse | column | row | row-reverse;}
</style>
- row（預設值）：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
border: 1px solid black;
display: flex;
flex-direction: column-reverse;
}
.item{
width: 50px;
height: 50px;
background-color: gold;
border: 1px solid red;
}
</style>
</head>
<!--小程式將 div 換成 view ，body 換成 page-->
<body>
<div class="container">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item"> 3</div>
<div class="item"> 4</div>
</div>
</body>
</html>
flex 屬性：flex-wrap
<style> /* 基本語法*/
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
</style>
- nowrap（預設）：不換行。
- wrap：換行，第一行在上方。
- wrap-reverse：換行，第一行在下方。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
.item{
width: 100px;
height: 100px;
background-color: gold;
border: 1px solid red;
}
</style>
</head>
<!--小程式將 div 換成 view ，body 換成 page-->
<body>
<div class="container">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item"> 3</div>
<div class="item"> 4</div>
<div class="item"> 5</div>
<div class="item"> 6</div>
<div class="item"> 7</div>
</div>
</body>
</html>
flex 屬性：flex-flow
flex-direction 屬性和 flex-wrap 屬性的 簡寫形式
<style> /* 基本語法*/ /* 預設 row nowrap*/
.box { flex-flow: <flex-direction> <flex-wrap>; }
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
border: 1px solid black;
display: flex;
flex-direction: row;
flex-flow:row-reverse wrap; /* 敲黑板*/
}
.item{
width: 100px;
height: 100px;
background-color: gold;
border: 1px solid red;
}
</style>
</head>
<!--小程式將 div 換成 view ，body 換成 page-->
<body>
<div class="container">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item"> 3</div>
<div class="item"> 4</div>
<div class="item"> 5</div>
<div class="item"> 6</div>
<div class="item"> 7</div>
</div>
</body>
</html>
專案伸縮及寬度
flex 屬性：flex-grow
定義專案的放大比例，預設為0，即就算存在剩餘空間，也不放大。
如果所有專案的 flex-grow 屬性都為1，則它們將等分剩餘空間（前提是還有剩餘空間的話）。
如果一個專案的 flex-grow 屬性為2，其他專案都為 1，則前者佔據的剩餘空間將比其他項 多一倍。
<style> /* 基本語法*/ /* default 0 */
.item { flex-grow: 具體數字; }
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container3{
margin: 10px;
border: 1px solid black;
width: 300px;
height: 50px;
background: red;
display: flex;
flex-wrap: wrap;
}
.item{
width: 20px;
background-color: gold;
border: 1px solid red;
/*flex-grow: 3;*/
}
.item_3{
width: 20px;
background-color: gold;
border: 1px solid red;
/*flex-grow: 2;*/
}
.item_4{
display: flex;
width: 20px;
background-color: gold;
border: 1px solid red;
/*flex-grow: 1;*/
}
</style>
</head>
<!--小程式將 div 換成 view ，body 換成 page-->
<body>
<div class="container3">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item_3"> 3</div>
<div class="item_4"> 4</div>
</div>
</body>
</html>
<style>
/* 分別加上以下屬性*/
.item{
flex-grow: 3;
}
.item_3{
flex-grow: 2;
}
.item_4{
flex-grow: 1;
</style>
flex 屬性：flex-shrink
定義了專案的縮小比例，預設為1，即當空間不足時，該專案將縮小。
如果所有專案的flex-shrink屬性都為1，此時容器的空間又不足，專案都將等比例縮小。
如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
<style> /* 基本語法*/ /* default 1 */
.item { flex-shrink: 具體數字，不能設定負值; }
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container3{
margin: 10px;
border: 1px solid black;
width: 300px;
height: 50px;
background: red;
display: flex;
}
.item{
width: 100px;
background-color: gold;
border: 1px solid red;
}
.item_4{
display: flex;
width: 200px;
background-color: gold;
border: 1px solid red;
display: flex;
/* 不新增 flex-shrink: 2;*/ /* item_4 沒有收縮*/
}
</style>
</head>
<!--小程式將 div 換成 view ，body 換成 page-->
<body>
<div class="container3">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item"> 3</div>
<div class="item_4"> 4</div>
</div>
</body>
</html>
<style>
.item_4{
display: flex;
width: 200px;
background-color: gold;
border: 1px solid red;
display: flex;
flex-shrink: 2; /* 新增之後，item_4 空間縮小*/
}
</style>
flex 屬性：flex-basis
設定或檢索 彈性盒 伸縮基準值，即專案在主軸上佔據的空間，如果元素不是彈性盒物件的元素，則 flex-basis 屬性不起作用。此種方式如同 width 和 height 的作用，但即使設定長度超過容器也不會超出容器。
<style> /* 基本語法*/
.item { flex-basis: number|auto|initial|inherit; }
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container3{
margin: 10px;
border: 1px solid black;
width: 300px;
height: 50px;
background: red;
display: flex;
}
/* 容器內的專案總寬度超出了容器，會按照比例縮小，不會超出容器*/
.item{
background-color: gold;
border: 1px solid red;
flex-basis: 400px; /* 寬度400px*/
}
.item_4{
background-color: gold;
border: 1px solid red;
flex-basis: 80px; /* 寬度80px*/
}
</style>
</head>
<!--小程式將 div 換成 view ，body 換成 page-->
<body>
<div class="container3">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item"> 3</div>
<div class="item_4"> 4</div>
</div>
</body>
</html>
flex 屬性：flex
flex屬性是 flex-grow , flex-shrink 和 flex-basis 的簡寫，預設值為0 1 auto，後兩個屬性可選。
<style> /* 基本語法*/
.item { flex: <'flex-grow'><'flex-shrink'><'flex-basis'>}
/* 預設：0 1 auto*/
/* 快捷值 auto：1 1 auto*/
/* 快捷值 none：0 0 auto*/
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container3{
margin: 10px;
border: 1px solid black;
width: 300px;
height: 50px;
background: red;
display: flex;
}
.item{
background-color: gold;
border: 1px solid red;
flex: 0 1 10px; /* 0 不伸，1 不縮，10px 寬度*/
}
.item_4{
background-color: gold;
border: 1px solid red;
flex: 0 1 20px; /* 0 不伸，1 不縮，20px 寬度*/
}
</style>
</head>
<!--小程式將 div 換成 view ，body 換成 page-->
<body>
<div class="container3">
<div class="item"> 1</div>
<div class="item"> 2</div>
<div class="item"> 3</div>