为了提升下自己felx布局，就跟着一些大佬尝试写了下麻将筒；

回顾布局

flex 它是一种布局方式。主要目的是通过父盒子控制子盒子如何排列。

主轴排列方式

默认的水平，但是可以转换。

1.justify-content: center;主轴居中排列；

2.justify-content: space-between; 左右两侧无缝隙；

3.justify-content: space-around; 两倍关系；

4.justify-content: space-evenly; 缝隙均等

侧轴对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

弹性盒子换行

特别是多行的情况下，我们需要给弹性盒子换行，给父盒子弹性容器加。 flex-wrap: wrap;

设置主轴方向

flex-direction: column;

让我们的主轴设置为垂直。默认的是 row 水平的。

代码区域

公共样式

    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    ul{
      display: flex;
      margin: 10px 0 0 10px;
      float: left;
      width: 80px;
      height: 100px;
      background-color:rgb(222, 227, 228);
      border-radius: 5px;
    }
    li{
      list-style: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
    }

一筒布局

    .ul1{
      justify-content: center;
     
    }
    .ul1>li{
      align-self:center;
    }

二筒布局

    .ul2{
     align-items: center;
     flex-direction: column;
     /* 弹性盒元素的方向为相反的顺序： */
     justify-content: space-around;
    }

三筒布局

 .ul3{
   padding: 10px;
 }
 .ul3 li:nth-child(2){
     align-self: center;
 }
 .ul3 li:nth-child(3){
   align-self: flex-end;
 }

四筒布局

.ul4{
 flex-wrap: wrap;
}
.ul4>li{
  margin:15px 10px;
}

五筒布局

 .ul5{
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px 0;
 }
 .ul5 li:nth-child(3){
 margin: 0 30px;
 }

六筒布局

  .ul6{
    flex-wrap: wrap;
    padding: 10px 0;
   align-items: center;
  }
  .ul6>li:nth-child(2n){
    margin-right: 10px;
  }
  .ul6>li:nth-child(2n+1){
    margin-left: 20px;
  }
  .ul6>li:nth-child(3),.ul6>li:nth-child(4){
  margin-top:6px ;
  margin-bottom: -6px;
  }

七筒布局

七筒的较为复杂，方法也较多，我这边采用一个ul包裹7个li，给每个li设置；也可以采用一个盒子包裹上下两个盒子，上面盒子按照三筒的布局排列，下面盒子按照四筒的布局排列，结合这个思路处理也是可以的。

   .ul7{
    flex-wrap: wrap;
    padding: 10px;
   }
 
   .ul7>li:nth-child(2){
     align-self: center;
   }
   .ul7>li:nth-child(3){
    align-self: flex-end;
   }
  .ul7>li:nth-child(5),.ul7>li:nth-child(7){
    margin-right: 10px;
  }
  .ul7>li:nth-child(4),.ul7>li:nth-child(6){
    margin-left: 10px;
  }
  .ul7>li:nth-child(4),.ul7>li:nth-child(5){
    margin-top:6px ;
   margin-bottom: -6px;
  }

八筒布局

   .ul8{
     flex-wrap: wrap;
     align-items:center ;
   }
   .ul8>li{
     margin: 2px 10px;
   }

九筒布局

   .ul9{
     flex-wrap: wrap;
     align-items:center ;
    justify-content: space-around;
    padding: 5px;
   }

基础布局

<body>
  <div>
    <ul class="ul1">
      <li></li>
    </ul>
    <ul class="ul2">
      <li></li>
      <li></li>
    </ul>
    <ul class="ul3">
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="ul4">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="ul5">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="ul6">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="ul7"> 
      <li> </li>
      <li> </li>
      <li> </li>  
      <li></li>
      <li></li>
      <li></li>
      <li></li>
 
    </ul>
    <ul class="ul8">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="ul9">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

flex布局书写麻将筒