In prosperity our friends know us; in adversity we know our friends.
得意时，朋友识我；失意时，我识朋友。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
源代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background: wheat">
<div style="display: flex;justify-content: center;align-items: center;">
<div class="box" style="justify-content: center;align-items: center;">
<div class="circle"></div>
</div>
<div class="box" style="justify-content: space-between;">
<div class="circle"></div>
<div class="circle" style="align-self: flex-end;"></div>
</div>
<div class="box" style="align-items: center;justify-content: space-between;">
<div style="align-self: flex-start" class="circle"></div>
<div class="circle"></div>
<div style="align-self: flex-end" class="circle"></div>
</div>
<div class="box" style="flex-direction: column;justify-content: space-between">
<div style="display: flex;justify-content: space-between">
<div style="" class="circle"></div>
<div class="circle"></div>
</div>
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="box" style="flex-direction: column;justify-content: space-between">
<div style="display: flex;justify-content: space-between">
<div style="" class="circle"></div>
<div class="circle"></div>
</div>
<div style="display: flex;justify-content: center">
<div class="circle"></div>
</div>
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="box" style="flex-direction: column;justify-content: space-between">
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="box" style="flex-direction: column;justify-content: space-between">
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div style="display: flex;justify-content: space-between">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
<style>
.box {
width: 100px;
height: 100px;
background: white;
display: flex;
margin: 10px;
}
.circle {
width: 30px;
height: 30px;
background: red;
border-radius: 15px;
}
</style>
</html>