Изменение размера следующего (справа) флекс-элемента во flexbox при изменении размера флекс-элемента с помощью команды «css resize» - PullRequest
Новая
       19

Изменение размера следующего (справа) флекс-элемента во flexbox при изменении размера флекс-элемента с помощью команды «css resize»

0 голосов
/ 11 мая 2018

Я хочу иметь flexbox, например, с. пять ящиков / элементов, и когда я изменяю размер (с помощью css resize) среднего ящика, ящики / предметы слева должны быть не тронуты, а текущий ящик (размер которого изменен) и последующие ящики должны быть гибко изменены.

В приведенном ниже коде при изменении размера среднего поля / элемента также изменяются все остальные, что не является требуемым результатом. Только те, которые справа, должны быть соответственно изменены. (цель - последний браузер)

UPDATE

В моем исходном коде произошла глупая ошибка ссылки, из которой был извлечен код ниже. Обновленный код ниже с чем-то ближе к окончательному ответу. Единственное, что меня сейчас смущает, это то, что в начале изменения размера иногда происходят странные скачки размеров.

Код: 

let boxes = document.querySelectorAll(".flex-item");

let observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "attributes" && mutation.oldValue.indexOf("width") === 0) {
      console.log(mutation);
      let el = mutation.target;
      let curWidth = window.getComputedStyle(el).getPropertyValue('width');
      
      while (el = el.previousElementSibling) { 
        console.log(el);
              //1. all previous element siblings must be fixed in width (with their current width fixed during the resizing of target element) 
        if (el.className.indexOf('flexstop') === -1) {
          el.style.width = window.getComputedStyle(el).getPropertyValue('width') + 'px';
          el.className += ' flexstop';
        }
      }
      el = mutation.target;
      while (el = el.nextElementSibling ) {
        console.log(el);
              //2. target element and all next element siblings must resize based on resizing target element
        el.className = el.className.replace(' flexstop', '');
      }
    }
  });
});


for(var x=0; x < boxes.length; x++)
{
  //boxes[x].style.width = window.getComputedStyle(el).getPropertyValue('width') + 'px';
  observer.observe(boxes[x], {
    attributes: true,
    attributeFilter : ["style"],
    subtree : false,
    childlist : false,
    attributeOldValue : true
});
}
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;

}

.flex-item {
  flex-grow: 1;
  width: 20vw;
  
  background: tomato;
  border: 3px solid rgba(0,0,0,.2);
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  
  overflow: scroll;
  resize: horizontal;
}

.flexstop {
  flex-shrink: 0;
  flex-grow: 0;
}
<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
</ul>
...