使用Flexbox订单在DOM订单商品之间订购商品 [英] Use flexbox order to order item between DOM-ordered items

问题描述

是否可以使用 order:2 并在不设置其他项目顺序的情况下将弹性项目按顺序放置?

没有顺序的

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

  div.flex-container {显示:flex;}div.flex-container div {flex-basis:10px;}div.order-2 {顺序: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"?

  +-显示:flex;----------------------------------------------------------------------- +|||+ ----------- + + ----------- + + ----------- ++ -----------+ + ----------- + ||||||| XXXXX XXXXX ||||||||一个||b || XXXX 1 XXXX ||c ||d |||||||| XXXXX XXXXX |||||||+ ----------- + + ----------- + + ----------- ++ -----------+ + ----------- + |||+ ----------------------------------------------------------------------------------------- + 

解决方案

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

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

通过向其添加 -1 的 order 值，也可以将元素一直移动到最前面.

下面是一个示例，您可以进行重新排序元素而无需为每个元素指定 order 值.

基本上只是向要显示在其他元素之后的那些元素添加具有更高 order 值的类.

  .flex-container {填充:0;边距:0;列表样式:无；显示:-webkit-box;显示:-moz-box;显示:-ms-flexbox;显示:-webkit-flex;显示:flex;-webkit-flex-flow:行换行；证明内容:环绕；}.flex-item {背景:黑色；填充:2px；宽度:50像素；高度:50px；边距顶部:10像素;行高:50px；白颜色;font-weight:粗体;字号:3em；文本对齐:居中；}.reorder {顺序:1；}  

 < ul class ="flex-container">< li class ="flex-item"> A</li>< li class ="flex-item"> B</li>< li class ="flex-item重新排序"> C</li>< li class ="flex-item重新排序"> D</li>< li class ="flex-item"> 1</li></ul>  

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

解决方案

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>

这篇关于使用Flexbox订单在DOM订单商品之间订购商品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！