前言

关于 Flex 布局的知识，推荐直接看阮一峰老师的这篇文章，下面直接上代码

1. 点数 1

html
<style>
  .box {
    padding: 12px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
  }
  span {
    width: 30px;
    height: 30px;
    background-color: black;
    border-radius: 15px;
  }
  .box1 {
    justify-content: center;
    align-items: center;
  }
</style>

<div class="box box1">
  <span class="item1"></span>
</div>

2. 点数 2

html
<style>
.box2 {
  justify-content:space-between;
}
.box2 .item2 {
  align-self:flex-end;
}
</style>

<div class="box box2">
  <span></span>
  <span class="item2"></span>
</div>

3. 点数 3

html
<style>
.box3 .item2 {
  align-self: center;
}
.box3 .item3 {
  align-self: flex-end;
}
</style>
<div class="box box3">
  <span class="item1"></span>
  <span class="item2"></span>
  <span class="item3"></span>
</div>

4. 点数 4

html
<style>
.box4 {
  flex-direction:column;
  justify-content:space-between;
}
.box4 div {    
  display: flex; 
  justify-content:space-between; 
}
</style>

<div class="box box4">
  <div>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
  </div>
</div>

5. 点数 5

html
<style>
.box5 {
  flex-direction:column;
  justify-content:space-between;
}
.box5 div {    
  display: flex; 
  justify-content:space-between; 
}
.box5 .column {    
  justify-content:center; 
}
</style>

<div class="box box5">
  <div>
    <span></span>
    <span></span>
  </div>
  <div class="column">
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
  </div>
</div>

6. 点数 6

html
<style>
.box6 {
  justify-content:space-between;
}
.box6 div {    
  display: flex; 
  flex-direction: column;
  justify-content:space-between; 
}
</style>

<div class="box box6">
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>