flex布局🤣麻将 flex布局确实好用确实在工作布局提高很高的效，推荐使用，，，，，，，，，，，，，，，，，，

flex布局确实好用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  ul{
    list-style: none;
    margin: 10px;
    padding:0px;
    width: 90px;
    height: 90px;
    background-color:#ccc;
    border-radius: 5px;
    float: left;
    display: flex;
  }
  ul li{
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
  }
  ul:nth-child(1){
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
  }
   ul:nth-child(2){
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
  ul:nth-child(3){
    /*  均匀排列每个元素 */
    justify-content: space-around;
  }
  ul:nth-child(3) li{
    margin: 5px;
  }
   ul:nth-child(3) li:nth-child(2){
  /* 居中对齐弹性对象 */
    align-self: center;
  }
  ul:nth-child(3) li:nth-child(3){
    /* 底部对齐 */
   align-self: flex-end;
  }
  ul:nth-child(4){
    justify-content: space-around;
    /* 换行 */
    flex-wrap: wrap;
  }
  ul:nth-child(4) li{
    margin:  12.5px;
  }
 ul:nth-child(5){
  justify-content: space-around;
  flex-wrap: wrap;
 }
 ul:nth-child(5) li{
  margin: 5px 12.5px;
 }
 ul:nth-child(5) li:nth-child(3){
  margin: 5px 35px;
 }
</style>
<body>
  <!-- 一个哦 -->
  <ul>
    <li></li>
  </ul>
  <!-- 两个哦 -->
  <ul>
    <li></li>
    <li></li>
  </ul>
  <!-- 三个哦 -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <!-- 第四个 -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <!-- 第五个 -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>