外层容器（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（上下两端对齐，注，未设置高度将拉伸至充满容器）| flex-start（垂直上对齐） | flex-end（垂直下对齐） | center（垂直居中） | baseline（首行文字基线对齐）
align-content（多行垂直对齐）：stretch（上下两端对齐，注，未设置高度将拉伸至充满容器） | 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（上下两端对齐，注，未设置高度将拉伸至充满容器）
示例（色子）
<!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; /* 不设置高垂直居中不好使 */
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>
