CSS的Flex布局之骰子布局（多项目篇）

经过上一次，已经对用Flex布局骰子单项目有一定的认知后，今天继续多项目篇。

双项目

<div class="dot-container">
    <span class="dot"></span>
    <span class="dot"></span>  
</div>

效果①

  display: flex;
  justify-content:space-between;

效果②

display: flex;
flex-direction: column;
justify-content:space-between;

效果 ③

display: flex;
flex-direction: column;
justify-content:space-between;
align-items: center;

效果 ④

display: flex;
flex-direction: column;
justify-content:space-between;
align-items: flex-end;

效果 ⑤

.dot-container
{
display: flex;
}

.dot:nth-child(2)
 {
  align-self: center;
 }

效果 ⑥

.dot-container
{
 display: flex;
 justify-content: space-between;
}

.dot:nth-child(2)
 {
  align-self: flex-end;
 }

三项目

.dot-container
{
 display: flex;
}
.dot:nth-child(2)
 {
  align-self: center;
 }
.dot:nth-child(3)
 {
  align-self: flex-end;
 }

四项目

<div class="dot-container">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
</div>

.dot-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

五项目

<div class="dot-container">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

.dot-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.column {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}
.column:nth-of-type(2) {
        justify-content: center;
}

六项目

.dot-container{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
}

至此，已经能够实现骰子的1到6布局，对Flex的简单布局有了初步了解。