flex常用語(yǔ)法

display: flex

父級(jí)元素相關(guān)

1. flex-direction 主軸方向【水平方向（默認(rèn)）、垂直方向】
2. justify-content 主軸上的對(duì)齊方式【flex-end結(jié)束對(duì)齊、space-between兩端對(duì)齊、center】
3. align-items 交叉軸的對(duì)齊方式【center、flex-end】
4. flex-wrap 內(nèi)部是否換行

子元素相關(guān)

1. align-self 子元素在交叉軸的對(duì)齊方式【開始對(duì)齊（默認(rèn)）、結(jié)束對(duì)齊、居中對(duì)齊】可以覆蓋align-items的屬性

數(shù)字3骰子的實(shí)現(xiàn)

// 偽代碼
<style>
.box{display: flex;justify-content: space-between;}
.item:nth-child(2){// 第二個(gè)點(diǎn)放中間align-self:center;     
}	
.item:nth-child(3){// 第三個(gè)點(diǎn)放右下align-self:flex-end;     
}	
</style>
<div class="box"><span class="item"></span><span class="item"></span><span class="item"></span>
</div>