Как мне использовать «flex-flow: column wrap»?

Укороченная версия

Когда используешьflex-flow: column wrap а такжеdisplay: inline-flexэто нет термоусадочная пленка, как:inline-block

(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('flex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length = 40) ascending = false;
  }, 20);
})();
(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('failex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length = 40) ascending = false;
  }, 20);
})();
#flexdesc {position: absolute; top: 25px;}
#flex {
  top: 50px;
  position: absolute;
  display: inline-flex;
  flex-flow: row wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  max-width: 180px;
  align-content: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
  transform-origin: top left;
}

#flex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
}
#failexdesc {position: absolute; top: 275px;}
#failex {
  top: 300px;
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 200px;
  align-content: flex-start;
  transform-origin: top left;
}

#failex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
}




JS Bin


  What I expect it to do
  
    <p>foo</p>
    
    
  
  What it does
  
    <p>foo</p>
  

Обратите внимание, как изменяется размер каждого гибкого контейнера (или нетт меняются!)

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

Почему нетэто термоусадочная пленка? Как мне сделать это термоусадочную пленку?









Оригинальный вопрос

flex-flow: row wrap достаточно просто понять. Если ничего нетсгибание»действует аналогично встроенным элементам; Он течет вправо, пока не сможетбольше не делать этого, после чего он создает новую строку.

flex-flow: column wrap сdisplay: flex похож. Он стекает вниз, пока не можетбольше не стекает (max-width?), а затем начинает новый столбец. Конечно, так как родительdisplay: flex, Это's элемент уровня блока, так что столбец будет на полпути из-за того, чтоalign-content по умолчаниюstretch, Я мог бы легко изменить это наflex-start сделать новый столбец смежным с предыдущим.

... но контейнер все еще слишком широк. Это'все еще блок, и заполняет его ширинус родителем.

Мне нужно flexbox, чтобы сжать, чтобы соответствовать его столбцы. Зачем? Я'Я пытаюсь использовать flexbox на горизонтально прокручивающемся веб-сайте. Конечно, я мог бы просто позволить детям переполниться, но это переполнение имеет тенденцию ... разрушать вещи. Итак, я решил, что мне нужноflex-flow: column wrap сdisplay: inline-flex, Я надеялся насверху вниз, слева направо эффект, когда родитель не имеет пустого пространства.

...а потомэтот получилось. В Chrome родительская ширина равна сумме ширины дочерних элементов, но в противном случае перенос будет нормальным. В Firefox родительский файл имеет полную ширину и просто становится выше, чтобы вместить элементы (я неНе думаю, что Firefox поддерживает упаковку). В IE11 ширина верна, но потомки просто переполняются (даже из тела). I '

Я так растерялся.

Что я здесь не так делаю? Я понимаю, что flexbox - более новая функция, но я могуне могу сказать, насколько это моя вина против браузера.

Кстати, ям тестирую это в хроме. Решение только для хрома мне подходит. (Но элегантное универсальное решение всегда приятно!)

Воткод для демонстрации, с которой я связан, если jsbin не работает:

var ascending = true;
   setInterval(function() {
     var parent = document.getElementById('flex');
     if (ascending) {
       var child = document.createElement('p');
       child.innerHTML = "f";
       parent.appendChild(child);
     } else {
       parent.removeChild(parent.children[0]);
     }
     if (parent.children.length = 30) ascending = false;
   }, 200);
#flex {
  display: inline-flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  align-content: flex-start;
}
p {
  margin: 0;
  outline: 1px solid black;
  width: 10px;
}
body {
  height: 150px;
  width: 300px;
  outline: 1px dashed black
}



  
  JS Bin


  
    <p>f</p>
    
  

Ответы на вопрос(3)

метов, более гибкое решение:

.parent {
  column-count: 4
}
.child {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

Вам также может понадобиться настроитьmargin-top из.child:first-child если они неt выровнять к вершине.

https://bugs.chromium.org/p/chromium/issues/detail?id=247963 https://bugs.chromium.org/p/chromium/issues/detail?id=507397

Как ОП хотел:

Мне нужно flexbox, чтобы сжать, чтобы соответствовать его столбцы. Зачем? Я'Я пытаюсь использовать flexbox на горизонтально прокручивающемся веб-сайте. Конечно, я мог бы просто позволить детям переполниться, но это переполнение имеет тенденцию ... разрушать вещи. Поэтому я решил, что мне нужен flex-flow: обтекание столбца с display: inline-flex. Я надеялся насверху вниз, слева направо эффект, когда родитель не имеет пустого пространства.

Мы можем просто достичь этого,flex-flow: column wrap;align-content: flex-start; и обертка фиксированной высоты вместе.

http://output.jsbin.com/qixuxiduxe/1

#flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 100%;
  width: 150px;
  overflow: auto;
  align-content: flex-start;
}

p {
  margin: 0;
  align-self: flex-start
}

body {
  height: 150px;
}

Обновленная скрипка:http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

но я думаюколонная обертка» не полностью поддерживается Firefox. Как вы сказали, выЭто понадобится в Chrome, в этом случае вы можете увидеть, что сделал Крис Койер: добавьте префикс webkit -> http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Надеюсь не поздно: /

ВАШ ОТВЕТ НА ВОПРОС