Question

是否可以使用order: 2并将Flex项目按顺序放置，而不对其他项目设置顺序？

没有顺序的div元素以DOM顺序显示，但是以下内容不会在DOM排序元素之间移动order: 2元素，因为元素没有指定顺序。 / p>

＆＃13;

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

＆＃13;

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

＆＃13;

是否可以对.order-2 div进行排序，使其位于DOM排序元素之间，以便＆＃34; ab1cd＆＃34;显示？

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

Answer 1

Flex项的默认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>

使用flexbox命令在DOM订购的商品之间订购商品

1 个答案: