使用 flexbox order 在 DOM-ordered 项目之间排序项目答案

【问题标题】：Use flexbox order to order item between DOM-ordered items使用 flexbox order 在 DOM-ordered 项目之间排序项目
【发布时间】：2015-08-23 23:43:14
【问题描述】：

是否可以使用order: 2 并让该弹性项目按顺序定位而不在其他项目上设置顺序？

没有顺序的 div 元素按 DOM 顺序显示，但以下内容不会将 order: 2 元素移动到按 DOM 排序的元素之间，因为这些元素没有指定顺序。

div.flex-container {
  display: flex;
}
div.flex-container div {
  flex-basis: 10px;
}
div.order-2 {
  order: 2;
  -webkit-order: 2;
}

<div class="flex-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div class="order-2">1</div>
</div>

是否可以对.order-2 div 进行排序，使其位于 DOM 排序元素之间，从而显示“ab1cd”？

+-- display: flex; -----------------------------------------------------------------------+
|                                                                                         |
|   +-----------+  +-----------+  +-----------+  +-----------+  +-----------+             |
|   |           |  |           |  |XXXXX XXXXX|  |           |  |           |             |
|   |     a     |  |     b     |  |XXXX 1 XXXX|  |     c     |  |     d     |             |
|   |           |  |           |  |XXXXX XXXXX|  |           |  |           |             |
|   +-----------+  +-----------+  +-----------+  +-----------+  +-----------+             |
|                                                                                         |
+-----------------------------------------------------------------------------------------+

【问题讨论】：

标签： html css flexbox

【解决方案1】：

弹性项目的默认order 值为0。如果您不想为所有元素指定 order 值，则需要移动元素。

知道默认值为0，您可以将order 值1 添加到您希望在最后一个项目之后的项目。它们拥有相同的order 值是没有问题的，因为具有相同order 值的元素会按照它们在源代码中出现的顺序显示。

还可以通过向元素添加order 值-1 来将元素一直移动到最前面。

下面是一个示例，说明如何在不为每个元素指定 order 值的情况下对元素进行重新排序。

基本上只需将具有更高order 值的类添加到您希望出现在其他元素之后的那些元素。

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}
.flex-item {
    background: black;
    padding: 2px;
    width: 50px;
    height: 50px;
    margin-top: 10px;
    line-height: 50px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

.reorder {
    order: 1;
}

<ul class="flex-container">
    <li class="flex-item">A</li>
    <li class="flex-item">B</li>
    <li class="flex-item reorder">C</li>
    <li class="flex-item reorder">D</li>
    <li class="flex-item">1</li>
</ul>

【讨论】：