前言
Flex是Flexible Box的縮寫，就是「彈性布局」。從2012年已經面世，但由於工作環境的原因一直沒有詳細了解。最近工作忙到頭暈腦脹，是要學點新東西刺激一下大腦，打打雞血。
Flex就這么簡單
瀏覽器兼容性
一說到兼容性就是永遠的痛，不過幸運的是只要在IE10加-ms-前綴就可以用啦_
涉及的對象
Flex布局主要是操作Flex Container 和 Flex Item兩類對象。
Flex Container為作為布局容器擁有main axis，main start，main end，cross axis，cross start 和 cross end屬性。
- main axis為主軸，默認是水平方向；
- main start為主軸起始位置，默認是主軸和左側邊框的交叉點(Flex Item會從main start和cross start開始排列)；
- main end為主軸結束位置，默認是主軸和右側邊框的交叉點；
- cross axis為交叉軸，默認是垂直方向；
- cross start為交叉軸起始位置，默認是交叉軸和上邊框的交叉點；
- cross end為交叉軸結束位置，默認是交叉軸和下邊框的交叉點。
Flex Item則為容器內的孩子元素，擁有main size和cross size屬性。
- main size為Flex Item的主軸方向寬度；
- cross size為Flex Item的交叉軸方向寬度。
玩轉Flex Container
/* 設置Flex Container，為其直接孩子節點創建Flex Context */
display: flex; /* 定義塊級Flex Contianer */
display: inline-flex; /* 定義行級Flex Contianer */
/* 設置main/cross axis方向和main/cross start, main/cross end的位置
* row - 默認值，main axis為水平，main start為主軸和左側邊框的交叉點，main end為主軸和右側邊框的交叉點
* cross axis為垂直，cross start為交叉軸和上邊框的交叉點，cross end為交叉軸和下邊框的交叉點
* row-reverse - main axis為水平，main start為主軸和右側邊框的交叉點，main end為主軸和左側邊框的交叉點
* cross axis為垂直，cross start為交叉軸和上邊框的交叉點，cross end為交叉軸和下邊框的交叉點
* column - main axis為垂直，main start為主軸和上邊框的交叉點，main end為主軸和下邊框的交叉點
* cross axis為水平，cross start為交叉軸和左側邊框的交叉點，cross end為交叉軸和右側邊框的交叉點
* column-reverse - main axis為垂直，main start為主軸和下邊框的交叉點，main end為主軸和上邊框的交叉點
* cross axis為水平，cross start為交叉軸和左側邊框的交叉點，cross end為交叉軸和右側邊框的交叉點
*/
flex-direction: row | row-reverse | column | column-reverse
/* 是否換行
* nowrap - 默認值，打死都不換行
* wrap - 乖乖換行，第一行到最后一行的方向為從 cross start 到 cross end
* wrap-reverse - 乖乖換行，但第一行到最后一行的方向為從 cross end 到 cross start
*/
flex-wrap: nowrap | wrap | wrap-reverse
/* 一次搞定flex-direction 和 flex-wrap設置
*/
flex-flow: <flex-direction> || <flex-wrap>
/* 設置main axis方向的對齊方式
* flex-start - 默認值，向main start對齊
* flex-end - 向main end對齊
* center - 居中
* space-between - 若有多余空間，則平均分配到各Flex Item之間
* space-around - 若有多余空間，則平均分配到各Flex Item兩邊
* space-evenly - 若有多余空間，按"多余空間/(FlexItem數+1)"計算得到空間寬度，然后分配到各Flex Item兩邊
*/
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
/* 設置cross axis方向的對齊方式
* stretch - 默認值，當height為auto時，Flex Item被拉伸沾滿cross axis的空間；否則無效果。
* flex-start - 向cross start對齊
* flex-end - 向cross end對齊
* center - 居中
* baseline - 對齊Flex Container的baseline
*/
align-items: flex-start | flex-end | center | stretch | baseline
/* 設置cross axis出現多行時，cross axis方向的對齊方式。當僅有一行時，無效果。
* stretch - 默認值，當height為auto時，Flex Item被拉伸沾滿cross axis的空間；否則無效果。
* flex-start - 向cross start對齊
* flex-end - 向cross end對齊
* center - 居中
* space-between - 若有多余空間，則平均分配到各Flex Item之間
* space-round - 若有多余空間，則平均分配到各Flex Item兩邊
*/
align-content: flex-start | flex-end | center | stretch | space-between | space-around
玩轉Flex Item
注意：Flex Item的float,clear和vertical-align均無效。
/* 設置顯示順序
* 默認值為0，根據元素在DOM樹的位置決定顯示的順序
*/
order: <integer>
/* 設置當main axis方向存在多余空間時，元素拉伸所占的比例。
* 例如#div1[style="flex-grow:1"]和#div2[style="flex-grow:3"]，現在多余空間為400px，那么div1占400*1/(1+3)，而div2占400*3/(1+3)。
* 默認值為0，即元素不拉伸
*/
flex-grow: <number>
/* 設置當main axis方向存在空間不足且flex-wrap:nowrap時，元素的縮放比例。
* 默認值為1
*/
flex-shrink: <number>
/* 設置元素的默認寬度，當設置為0時flex-grow無效
* 默認值為auto
*/
flex-basis: auto | <length>
/* 一次搞定flex-grow、 flex-shrink和flex-basis
* 默認值0 1 auto，關鍵值none 為 0 0 auto，關鍵值auto為 1 1 auto。
*/
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
/* 設置cross axis方向的對齊方式
* stretch - 默認值，當height為auto時，Flex Item被拉伸沾滿cross axis的空間；否則無效果。
* flex-start - 向cross start對齊
* flex-end - 向cross end對齊
* center - 居中
* baseline - 對齊Flex Container的baseline
*/
align-self: auto | flex-start | flex-end | center | baseline | stretch
應用
通過Flex Layout我們可以輕松實現過去不好實現的效果
色子
<div class="box box1">
<span class="dot"></span>
</div>
<div class="box box2">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="box box3">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="box box4">
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="box box5">
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
</div>
<span class="dot"></span>
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="box box6">
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
.box{
vertical-align: top;
margin: 10px;
padding: 10px;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10%;
box-shadow: 0 5px 1px #fff inset
, 0 -5px 1px #888 inset
, 5px 0 1px #aaa inset
, -5px 0 1px #aaa inset;
display: inline-flex;
flex-flow: row wrap;
}
.dot{
width:30px;
height:30px;
background: #222;
border-radius:50%;
box-shadow: 1px 4px 1px #000 inset
, -1px -3px 3px #444 inset;
}
.box1{
justify-content: center;
align-items: center;
}
.box2{
justify-content: space-between;
}
.box2 > .dot:last-child{
align-self: flex-end;
}
.box3{
justify-content: space-between;
}
.box3 > .dot:nth-of-type(2){
align-self: center;
}
.box3 > .dot:last-child{
align-self: flex-end;
}
.box4{
flex-flow: column;
justify-content: space-between;
}
.column{
display: flex;
justify-content: space-between;
}
.box5{
flex-flow: column;
justify-content: space-between;
}
.box5 > .dot{
align-self: center;
}
.box6{
flex-flow: row;
justify-content: space-between;
}
.box6 > .column{
flex-flow: column;
}
聖杯布局
<body class="container">
<header>#header</header>
<main>#main</main>
<aside class="left-aside">#aside1</aside>
<aside class="right-aside">#aside2</aside>
<footer>#footer</footer>
</body>
body{
margin:0;
font-style: italic;
font-family: sans;
}
/* Holy Grail Layout */
.container{
display: flex;
flex-direction: column;
}
@media all and (min-width: 600px){
.container{
flex-flow: row wrap;
}
header,footer{
flex: 0 0 100%;
}
header{
order: 0;
}
footer{
order: 4;
}
.left-aside{
order: 1;
}
.right-aside{
order: 3;
}
.left-aside,.right-aside{
flex: 0 0 10em;
}
main{
order: 2;
flex: 1;
}
}
/* User Defined Style*/
.container > *{
text-align: center;
}
main{
background: #ccc;
line-height: 6;
}
.left-aside{
background: skyblue;
line-height: 4;
}
.right-aside{
background: tomato;
line-height: 4;
}
header,footer{
background: #666;
line-height: 3;
}
柵格系統
<div class="grid">
<div class="row">
<div class="col col-5">
<div>5/10</div>
</div>
<div class="col col-4">
<div>4/10</div>
</div>
<div class="col col-1">
<div>1/10</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div>
auto
</div>
</div>
<div class="col col-3">
<div>
3/10
</div>
</div>
</div>
/* Mobile First Grid System */
.grid{
display: flex;
flex-flow: row wrap;
}
.row{
flex:0 0 100%;
display:flex;
flex-flow: row wrap;
}
.col{
box-sizing: border-box;
padding: 5px;
flex: 0 0 100%;
}
@media all and (min-width:600px){
.col{
flex: 1;
}
.col-10{flex:0 0 100%;}
.col-9{flex:0 0 90%;}
.col-8{flex:0 0 80%;}
.col-7{flex:0 0 70%;}
.col-6{flex:0 0 60%;}
.col-5{flex:0 0 50%;}
.col-4{flex:0 0 40%;}
.col-3{flex:0 0 30%;}
.col-2{flex:0 0 20%;}
.col-1{flex:0 0 10%;}
}
/* User Defined Style*/
.col>div{
text-align: center;
background: #bbb;
line-height: 2.5;
height: 100%;
font-family: sans;
}
帶附加項的表單控件
<div class="form-input">
<i class="form-addon">Amount</i>
<input class="form-control">
<i class="form-addon form-addon-after">Encrypt</i>
</div>
.form-input{
display: inline-flex;
line-height: 2;
border: solid 1px rgba(0,0,0,0.3);
}
.form-input:hover{
border: solid 1px rgba(0,0,0,0.4);
}
.form-addon{
font-style: normal;
color: #666;
background: #ddd;
padding-left: 10px;
padding-right: 10px;
border-right: solid 1px rgba(0,0,0,0.3);
}
.form-addon-after{
border-left: solid 1px rgba(0,0,0,0.3);
border-right: none 0;
}
.form-control{
border:none 0;
outline-color: transparent;
padding: 5px;
caret-color: #888;
font-size: 16px;
}
總結
尊重原創，轉載請注明轉自：https://www.cnblogs.com/fsjohnhuang/p/9134088.html _肥仔John