flex-direction属性值的基本效果示意实例页面

展示

代码

• HTML：

  <h4>默认值row</h4>
  <div class="container">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>row-reverse</h4>
  <div class="container row-reverse">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>column</h4>
  <div class="container column">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>
  <h4>column-reverse</h4>
  <div class="container column-reverse">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
  </div>

• CSS：

  .container {
      display: flex;
      outline: 1px dotted;
  
      counter-reset: index;
  }
  .container > div {
      background: radial-gradient(circle, white, deepskyblue);
  }
  .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;
  }
  .row-reverse {
      flex-direction: row-reverse;
  }
  .column {
      flex-direction: column;
  }
  .column-reverse {
      flex-direction: column-reverse;
  }