row-reverse属性值和CSS逻辑属性无关实例页面

展示

代码

• HTML：

  <h4>1. 从左往右 row</h4>
  <div class="flex">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
  </div>
  <h4>2. 从右往左 row-reverse</h4>
  <div class="flex reverse">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
  </div>

• CSS：

  .flex {
      display: flex; 
  }
  .reverse {
      flex-direction: row-reverse;
  }
  .item {
      flex: 1;
      padding: 40px;
      border-inline-start: 1rem solid deepskyblue;
      background-color: azure;
  }