文章/答案/技术大牛

发布

社区首页 >问答首页 >使用柔性盒顺序在DOM排序项之间订购项目

问使用柔性盒顺序在DOM排序项之间订购项目
EN

Stack Overflow用户

提问于 2015-08-23 14:58:19

回答 1查看 486关注 0票数 1

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

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

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

Stack Overflow用户

回答已采纳

发布于 2015-08-23 15:33:55

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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32168052

复制

相似问题

问使用柔性盒顺序在DOM排序项之间订购项目
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用柔性盒顺序在DOM排序项之间订购项目EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用柔性盒顺序在DOM排序项之间订购项目
EN