外層容器（container）
聲明：
display: flex;
display: inline-flex;
屬性（斜體為默認）：
flex-direction（方向）：row（左起橫） | row-reverse（右起橫） | column（上起豎） | column-reverse（下起豎）
flex-wrap（換行）：nowrap| wrap（上到下） | wrap-reverse（下到上）
flex-flow（簡寫）：<flex-direction> <flex-wrap>
justify-content（一行水平對齊）：flex-start （水平左對齊）| flex-end（水平右對齊） | center（水平居中） | space-between（水平兩端對齊） | space-around（水平等距對齊）
align-items（垂直對齊）：stretch（上下兩端對齊，注，未設(shè)置高度將拉伸至充滿容器）| flex-start（垂直上對齊） | flex-end（垂直下對齊） | center（垂直居中） | baseline（首行文字基線對齊）
align-content（多行垂直對齊）：stretch（上下兩端對齊，注，未設(shè)置高度將拉伸至充滿容器） | flex-start（垂直上對齊） | flex-end（垂直下對齊） | center（垂直居中）| space-between（垂直兩端對齊） | space-around（垂直等距對齊）
項目（items）
order（排序）：0| <integer> 越小越靠前（上），可為負值
flex-grow（拉伸比例）：0| <integer> 0表示固定大小，item的值/所有item和=拉伸比例
flex-shrink（縮小比例）：1| <integer> 0表示固定大小，item的值/所有item和=縮小比例
flex-basis（寬度）：auto| <integer>px 建議和項目width一致
flex（簡寫）：0 1 auto| none(0 0 auto) | auto(1 1 auto) | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self（垂直對齊）：***auto(繼承容器align-items) ***| flex-start（垂直上對齊） | flex-end（垂直下對齊） | center（垂直居中） | baseline（首行文字基線對齊）| stretch（上下兩端對齊，注，未設(shè)置高度將拉伸至充滿容器）
示例（色子）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex骰子代碼</title>
</head>
<style type="text/css">
body {
width: 100%;
height:100vh; /* 不設(shè)置高垂直居中不好使 */
background-color: beige;
flex-direction: row; /* 可省略 */
display: flex;
justify-content: center;
align-items: center;
}
.dice-one,.dice-two,.dice-three {
display: flex;
flex-direction: row; /* 可省略 */
width: 200px;
height: 200px;
background-color: white;
margin: 30px;
align-items: center;
justify-content: space-between;
}
.pip{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #333;
margin: 10px;
}
.dice-one{
justify-content: center;
}
.dice-two{
align-items: flex-start;
justify-content:space-between;
}
.dice-two .pip:nth-of-type(2){
align-self: flex-end;
}
.dice-three{
align-items: flex-start;
justify-content:space-between;
}
.dice-three .pip:nth-of-type(2){
align-self: center;
}
.dice-three .pip:nth-of-type(3){
align-self: flex-end;
}
</style>
<body>
<div id="dice-one" class="dice-one">
<div class="pip"></div>
</div>
<div id="dice-two" class="dice-two">
<div class="pip"></div>
<div class="pip"></div>
</div>
<div id="dice-three" class="dice-three">
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
</div>
</body>
</html>
