Wie zu verwenden css3 flexbox, multi-column layout ohne ausbau des vertikal?

Spiele ich mit dem css3 - flexbox-in Chrom (sorgen Sie sich nicht um cross-browser). Ich habe eine harte Zeit zu überzeugen, dass es lag, mein Inhalt, die Art, wie ich möchte. Hier ist eine Skizze von meinem Ziel:

Wie zu verwenden css3 flexbox, multi-column layout ohne ausbau des vertikal?

Hier ein jsFiddle meinen Versuch: http://jsfiddle.net/Yht4V/2/ Dies scheint gut zu funktionieren, außer jede .group erweitern Ihre Höhe eher als das erstellen mehrerer Spalten.

Ich bin mit flexbox-weltweit hier. Die body legt sich senkrecht, mit der #content div Einnahme der verbleibenden Höhe der Seite. Jeder .group ist horizontal angeordnet. Schließlich wird jeder .item angeordnet ist innerhalb eines .group vertikal mit der Verpackung.

Leider jeder .group endet als eine einzelne Spalte, die durch den ausbau der #content Höhe, wodurch eine vertikale Bildlaufleiste (unerwünschte). Wenn ich die Höhe der einzelnen .group zu einer festen pixel-Größe, die Elemente, die brechen in mehrere Spalten, aber diese Niederlagen der Fluidität der flexbox. Hier sieht es aus mit festen Höhen: http://jsfiddle.net/Yht4V/3/

So, wie kann ich meine #content div nicht vertikal erweitern, da ist alles geschafft mit flexboxes ohne Einstellung einer festen Höhe? Ich hatte erwartet, die flexbox auslösen, mehr Spalten, anstatt den ausbau der Höhe des übergeordneten Elements ein und verursacht einen Scrollbalken.

Sollte die ganze Sache flüssig, egal wie groß/klein man das Fenster? Warum machen die Elemente haben einen festen 200px Breite? Sollte eine .Gruppe in der Lage sein, die Spalten oder nur die erste? Sollte irgendein überlauf? (was ist, wenn ich hinzufügen 100 Artikel pro Gruppe) Flexbox-nicht stapelbar Spalten wie das, was Sie wollen, das ist nicht ein layout Ziel für flexbox. Bekommen, was Sie wollen in Ihrem pic ist einfach, ich weiß einfach nicht, alle die Skalierung von Anforderungen, die könnte es sehr schwer oder unmöglich, nur mit CSS.
Ich experimentiere mit einem Windows 8 "metro" - style-design mit plain HTML/CSS, so dass im Idealfall jede Gruppe möchte hinzufügen, Spalten horizontal als nötig und verursachen eine horizontale Bildlaufleiste iff notwendig (so fügen Sie Elemente vertikal ersten, dann wickeln Sie nach der Spalte horizontal). Ich sehe Möglichkeiten, dies zu erreichen mit JS, aber hatte gehofft, es könnte getan werden, nur mit HTML5/CSS3 in Webkit.
Beantworten Sie Fragen direkt: ja, es sollte Flüssigkeit unabhängig von der Höhe/Breite des Bildschirms (ich habe keine Kontrolle über die screen-Größe). Jedes Element ist die Feste Größe, die durch design, dies gilt für meinen endgültigen Umsetzung. Vielleicht nicht die genauen Maße, aber fest dennoch. Schließlich, wie ich oben erwähnt, Elemente füllen sollten, dann vertikal-überlauf-horizontal.

InformationsquelleAutor Bret Kuhns | 2012-12-27

  1. 7

    Was ich gesehen habe mit dem Chrome-und Opera-Implementierungen für Flexbox, ein flex-direction von Spalte erfordert die Beschränkung der Höhe des Elements, sonst wird es weiter ausbauen, vertikal. Es muss nicht ein Fixer Wert ist, kann es einen Prozentsatz.

    Sagte, das layout, das Sie möchten für Ihre .group Elemente können auch erreicht werden, indem die CSS-Spalten-Modul. Der Fluss der Elemente werden ähnlich wie die flexbox-Spalte Orientierung, aber es wird Spalten erstellen, solange es genug Breite für Sie, unabhängig davon, wie lang das Dokument ist.

    http://jsfiddle.net/Yht4V/8/ (du musst entschuldigen Sie die fehlenden Präfixe)

    html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    flex: 1 1 auto;
}

#content > .group:first-child {
    columns: 10em;
    flex-grow: 2;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    break-inside: avoid;
}

#content > .group .item:first-child {
    margin-top: 0;
}

    Verlassen, als eine Reihe von verschachtelten flexboxes, das war ungefähr so nah, wie ich bekommen konnte:

    http://jsfiddle.net/Yht4V/9/ (wieder, keine Präfixe)

    html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap;
    flex: 1 1 30%;
    max-height: 100%;
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}

    InformationsquelleAutor cimmanon

  2. 0

    Ersetzen Sie Folgendes in der css
    display: -webkit-flex;
    die folgenden
    display: -webkit-box;

    Dies funktionierte sehr gut für mich 🙂

    InformationsquelleAutor Deepa

Schreibe einen Kommentar