經(jīng)過上一次帮非，已經(jīng)對用Flex布局骰子單項目有一定的認(rèn)知后，今天繼續(xù)多項目篇。

雙項目

<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;
}

至此，已經(jīng)能夠?qū)崿F(xiàn)骰子的1到6布局凶伙，對Flex的簡單布局有了初步了解。