Jak korzystać z „flex-flow: column wrap”?

Question

Sep 07, 2013, 04:56 AM

Jak korzystać z „flex-flow: column wrap”?

Krótka wersja

Podczas używaniaflex-flow: column wrap idisplay: inline-flex, to się nie kurczyinline-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 <= 1) ascending = true;
    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 <= 1) ascending = true;
    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;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="flexdesc">What I expect it to do</div>
  <div id="flex">
    <p>foo</p>
    
    <!-- add extra "<p>foo</p>" here. -->
  </div>
  <div id="failexdesc">What it does</div>
  <div id="failex">
    <p>foo</p>
  </div>
</body>
</html>

Zwróć uwagę, jak zmienia się rozmiar każdego elastycznego kontenera (lub nie zmienia się!)

Chcę tego zachowania, ponieważ chcę umieścić te elementy obok siebie dla poziomo przewijanej strony.

Dlaczego się nie kurczy? Jak sprawić, aby się kurczyła?

Oryginalne pytanie

flex-flow: row wrap jest wystarczająco prosty do zrozumienia. Jeśli nic się nie „wygina”, działa podobnie do elementów wbudowanych; Płynie w prawo, aż nie może już tego zrobić, w tym momencie tworzy nowy rząd.

flex-flow: column wrap zdisplay: flex jest podobny. Płynie w dół, aż przestanie płynąć w dół (max-width?), a następnie rozpoczyna nową kolumnę. Oczywiście, ponieważ rodzic jestdisplay: flex, jest to element na poziomie bloku, więc kolumna będzie w połowie z powodu tego, żealign-content domyślniestretch. Mogę to łatwo zmienićflex-start aby nowa kolumna sąsiadowała z poprzednią.

... ale pojemnik jest nadal zbyt szeroki. Nadal jest blokiem i wypełnia szerokość jego rodzica.

Potrzebuję flexboxa, aby dopasować się do jego kolumn. Czemu? Próbuję użyć Flexbox w przewijanej poziomo witrynie. Oczywiście, mogłem po prostu pozwolić dzieciom przelewać się, ale ten przepełniony ma tendencję do ... łamania rzeczy. Więc pomyślałem, że potrzebujęflex-flow: column wrap zdisplay: inline-flex. Liczyłem na efekt „od góry do dołu, od lewej do prawej”, w którym rodzic nie ma pustej przestrzeni.

...i wtedyto stało się. W chrome szerokość nadrzędna jest równa sumie szerokości podrzędnych, ale poza tym owijanie jest normalne. W Firefoxie rodzic ma pełną szerokość i po prostu staje się wyższy, aby pomieścić elementy (nie sądzę, aby firefox wspierał zawijanie). W IE11 szerokość jest prawidłowa, ale dzieci po prostu przelewają się (nawet poza ciało).

Jestem zmieszany.

Co ja tu robię źle? Rozumiem, że flexbox jest nowszą funkcją, ale nie mogę powiedzieć, ile z tego jest moja wina w porównaniu z przeglądarką.

W ten sposób testuję to w chrome. Rozwiązanie przeznaczone wyłącznie do chromowania jest dla mnie w porządku. (Ale eleganckie rozwiązanie typu catch-all jest zawsze miłe!)

Otokod demo, z którym się łączyłem, w przypadku, gdy jsbin jest wyłączony:

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 <= 1) ascending = true;
     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
}

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>