flex-flow属性基本效果示意实例页面

展示

代码

• HTML：

  <h4>flex-flow: row-reverse wrap-reverse</h4>
  <div class="container">
      <div><img src="../images/nature-7.jpg"></div>
      <div><img src="../images/wallpaper-3.jpg"></div>
      <div><img src="../images/nature-8.jpg"></div>
      <div><img src="../images/wallpaper-2.jpg"></div>
  </div>

• CSS：

  .container {
      display: flex;
      flex-flow: row-reverse wrap-reverse;
      outline: 1px dotted;
  }
  .container > div {
      background: radial-gradient(circle, white, deepskyblue);
  }
  
  .container {
      counter-reset: index;
  }
  .container > div::before {
      counter-increment: index;
      content: counter(index);
      background-color: #cd0000;
      background-clip: content-box;
      color: #fff;
      position: absolute;
      border-radius: 50%;
      width: 22px; height: 22px;
      border: solid transparent;
      font-size: 14px;
      text-align: center;
      line-height: 22px;
  }