Why are items in a flex container not reordered when adding a new item?-CodePudding

See JSFiddle for a demo.

I have two flex containers with the following styling (defined in two style elements in the head element of the HTML):

#selected, #non-selected: {
    width: 50%;
    position: relative;
    display: flex;
    flex-wrap: wrap;    
    border: 1px solid black;
    padding: 3px;
    gap: 3px;
    background-color: white;
    height: 50px;
    max-height: 100px; 
 }

The flex items are divs (mimicking buttons) with this styling:

.item {
      border: 1px solid black;
      border-radius: 4px;
      background-color: #ccc;
      cursor: grab;
      width: max-content;
      box-sizing: border-box;
      align-items: center;
      display: flex;
      height: 40px;
      padding-right: 5px;
      padding-left: 5px;
}

The container with id #selected contains flex items like:

<div  order="1">...</div>
<div  order="2">...</div>

The container with id #non-selected contains flex items like:

<div  order="3">...</div>

Each flex item has an event listener. When clicking on a flex item (a div in this case) the div moves to the other flex container. But if I for instance click on the div with order 1, the new position will be to the right of the div with order 3 in the container with id #non-selected. So in some way the flex container is not updated. Do I do something wrong or is this the expected behaviour? I run Version 91.4.0esr, Firefox for openSUSE Leap, openSUSE-15.2 and Google Chrome Version 98.0.4758.80 (Official Build) (64-bit).

CodePudding user response：

The non-standard order attribute does not affect ordering within a Flex or Grid container. You need to set the order CSS property instead.

So instead of:

<div order="1">

you need:

<div style="order:1;">

Updated demo:

function moveOption() {

  let optionDivs = document.querySelectorAll('.item');

  optionDivs.forEach(function(div) {
    div.addEventListener('click', function() {
      if (this.parentElement.id === 'non-selected') {
        document.getElementById('selected').append(div);
      } else {
        document.getElementById('non-selected').append(div);
      }
    });
  });
}

moveOption();

#selected,
#non-selected {
  width: 50%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 3px;
  gap: 3px;
  background-color: white;
  height: 50px;
  max-height: 100px;
}

.item {
  border: 1px solid black;
  border-radius: 4px;
  background-color: #ccc;
  cursor: grab;
  width: max-content;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  height: 40px;
  padding-right: 5px;
  padding-left: 5px;
}

<div id="selected">
  <div style="order:1;" >Order 1</div>
  <div style="order:2;" >Order 2</div>
</div>

<div id="non-selected">
  <div style="order:3;" >Order 3</div>
</div>