it-swarm.com.de

Wie verwende ich "Flex-Flow: Column Wrap"?

Kurze Version

Bei Verwendung von flex-flow: column wrap und display: inline-flex verkleinert es sich nicht wie inline-block:

 enter image description here

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

Beachten Sie, wie sich die Größe jedes Flex-Containers ändert (oder nicht ändert!).

Ich möchte dieses Verhalten, weil ich diese Elemente nebeneinander für eine horizontal scrollende Website platzieren möchte.

Warum schrumpft es nicht? Wie mache ich es zusammenschrumpfen lassen?






Ursprüngliche Frage

flex-flow: row wrap ist einfach zu verstehen. Wenn nichts "biegt", verhält es sich ähnlich wie bei Inline-Elementen. Es fließt nach rechts, bis es nicht mehr geht, und bildet dann eine neue Reihe.

flex-flow: column wrap mit display: flex ist ähnlich. Es fließt nach unten, bis es nicht mehr nach unten fließen kann (max-width?) Und startet dann eine neue Spalte. Da das übergeordnete Element display: flex ist, handelt es sich natürlich um ein Element auf Blockebene, so dass die Spalte halbwegs vorbei ist, da align-content standardmäßig stretch verwendet wird. Ich könnte das leicht in flex-start ändern, um die neue Spalte neben der vorherigen zu machen.

... aber der Container ist noch zu breit. Es ist immer noch ein Block und füllt die Breite des übergeordneten Elements.

Ich brauche die Flexbox, um die Spalten zu verkleinern. Warum? Ich versuche Flexbox in einer horizontal scrollenden Website zu verwenden. Zugegeben, ich könnte die Kinder einfach überlaufen lassen, aber das Überlaufen neigt dazu, Dinge zu zerbrechen ... Also dachte ich, ich brauche flex-flow: column wrap mit display: inline-flex. Ich hoffte auf einen Effekt "von oben nach unten, von links nach rechts", bei dem das übergeordnete Element keinen leeren Platz hat.

... und dann dies ist passiert. In Chrom entspricht die übergeordnete Breite der Summe der Breiten der untergeordneten Elemente, ansonsten ist das Umwickeln normal. In Firefox ist das übergeordnete Element die gesamte Breite und wird einfach größer, um die Elemente aufzunehmen (ich glaube nicht, dass Firefox die Umhüllung unterstützt). In IE11 ist die Breite korrekt, aber die Kinder laufen einfach nach unten (sogar außerhalb des Körpers). 

Ich bin so verwirrt.

Was mache ich hier falsch? Ich verstehe, dass es sich bei Flexbox um ein neueres Feature handelt, aber ich kann nicht sagen, wie viel davon meine Schuld gegenüber dem Browser ist.

Übrigens teste ich das in Chrom. Eine reine Chromlösung ist für mich in Ordnung. (Aber eine elegante Catch-All-Lösung ist immer schön!)


Hier ist der Code für die Demo, die ich mit verlinkt habe, falls Jsbin nicht verfügbar ist:

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>

40
uber5001

Das war in der Tat ein Fehler. Hier die Links zum Tracker:

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

Als OP wollte:

Ich brauche die Flexbox, um ihre Säulen zu verkleinern. Warum? Ich versuche Flexbox in einer horizontal scrollenden Website zu verwenden. Zugegeben, ich könnte die Kinder einfach überlaufen lassen, aber dieses Überlaufen neigt dazu, Dinge zu zerbrechen. Also dachte ich, ich brauche Flex-Flow: Säulenverpackung mit Display: Inline-Flex. Ich hoffte auf einen Effekt "von oben nach unten, von links nach rechts", bei dem das übergeordnete Element keinen leeren Platz hat.

Wir können es einfach mit flex-flow: column wrap;, align-content: flex-start; und einem Wrapper mit fester Höhe zusammen erreichen.

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;
}

Geige aktualisiert: http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

5
Asim K T

Wenn Sie nicht wissen, wie hoch die einzelnen Artikel sind oder wie viele Artikel Sie haben werden, ist dies eine flexiblere Lösung:

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

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

Möglicherweise müssen Sie auch margin-top von .child:first-child wenn sie nicht nach oben ausgerichtet sind.

1
Marcus

Es könnte zu spät sein, aber ich denke, "column-wrap" wird von Firefox nicht vollständig unterstützt. Wie Sie sagten, benötigen Sie dies in Chrome. In diesem Fall können Sie sehen, was Chris Coyier getan hat: Webkit-Präfix hinzufügen -> http://css-tricks.com/snippets/css/a-guide-to -flexbox/

Hoffnung ist nicht zu spät: /

0
Adrián.