Use flexbox order to order item between DOM-ordered items

问题

Is it possible to use order: 2 and have that flex item be positioned in order without setting order on the other items?

div elements without order are shown in DOM order, however the following won't move the order: 2 element in between the DOM-ordered elements because the elements don't have an order specified.

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>

Is it possible to order the .order-2 div such that it is between the DOM-ordered elements, such that "ab1cd" is shown?

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

回答1:

The default order value of a flex item is 0. If you do not want to specify an order value for all elements, you will need to move the elements around.

Knowing that the default value is 0 you could add an order value of 1 to the items you want to come after your last item. It is no problem for them to have the same order value, because elements of the same order value are displayed in the order in which they appear in the source code.

It is also possible to move an element all the way to the front by adding an order value of -1 to it.

Here is an example of what you could do to reorder your elements without specifying an order value for each element.

Basically just add a class with a higher order value to those elements you want to appear after the other elements.

.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>

来源：https://stackoverflow.com/questions/32168052/use-flexbox-order-to-order-item-between-dom-ordered-items

标签

html

css

flexbox