×
  • 的CSS Flexbox–完整的初学者指南

  • 订购弹性物料

    课程清单

    容器中的伸缩项目按它们在源代码中出现的顺序进行布局。可以使用order属性更改此订单。

    在我们的示例中,如我们所见,有5个项目被排列,这是代码中出现的顺序。

    订购

    让我们使用订单来混合弹性商品。我们要做的是在任意一个flex项目类中,将order设置为1,然后看看发生了什么。

    index.html
    
    <div class="container d-flex">
      <div class="flex-item item-1">Item 1</div>
      <div class="flex-item item-2">Item 2</div>
      <!-- Setting order:1 to item-3 class -->
      <div class="flex-item item-3">Item 3</div>
      <div class="flex-item item-4">Item 4</div>
      <div class="flex-item item-5">Item 5</div>
    </div>
    

    因为我们有单独的类,所以我们可以将order属性设置为item-3或您身上有任何项目。

    style.css
    ...
    .item-3 {
        background-color: #1C4C56;
        order: 1
    }
    ...
    

    添加后,您会看到第3个项目将移至最后一个项目,这是因为默认情况下所有项目的顺序均为0。
    similarly, if we change 日e order of item 4 to order:2 it will push to 日e end of 日e container.

    style.css
    ...
    .item-4 {
        background-color: #1C4C56;
        order: 2
    }
    ...
    

    顺序优先

    如果项目对e.x的顺序相同:如果项目2和项目3的顺序与 order: 1

    style.css
    ...
    .item-2 {
        ...
        order: 1
    }
    .item-3 {
        ...
        order: 1
    }
    ...
    

    所以安排会像

    • The 0 订单商品将排在首位(按Delault订单)。
    • 然后,item-2将紧随其后,然后是item-3,因为在源代码中,顺序也是item-2,然后是item-3。
    • 如果源代码中item-3在item-2上方,则item-3将首先显示,然后显示item-2(如果两者具有相同的顺序)。

    因此,弹性项目的优先级与源代码中的顺序一致。


    演示版

    看笔
    格罗夫
    由rehmaanali(@geekstrick)
    密码笔.


    结论

    因此,order属性接受整数值,并用于控制flex-container中项目的顺序。具有相同顺序值的元素按它们在源代码中出现的顺序排列。

    订购弹性物料
    .
    .
  • 启用通知    不用了,谢谢