Est-il possible pour la flexion des éléments à aligner étroitement les éléments au-dessus d'eux?

C'est, en effet, la mise en page Pinterest. Cependant, les solutions trouvées en ligne sont enveloppés dans des colonnes, ce qui signifie que le conteneur, par inadvertance, se développe horizontalement. C'est pas la mise en page Pinterest, et il ne fonctionne pas bien avec chargées dynamiquement le contenu.

Ce que je veux faire est d'avoir un tas d'images de largeur fixe et asymétrique hauteur, disposées à l'horizontale, mais l'emballage dans une nouvelle ligne lorsque les limites de la largeur fixe conteneur sont remplies:

Est-il possible pour la flexion des éléments à aligner étroitement les éléments au-dessus d'eux?

Peut flexbox cela, ou dois-je avoir recours à un JS solution comme la Maçonnerie?

Il n'est pas clair ce que l'ordre de vos éléments et il est tout à fait important. Pourriez-vous ajouter des numéros à eux?
Je pensais à ce sujet, mais il pourrait peut-être limiter les réponses possibles. Je sais que les trois premiers serait de 1, 2, 3 de gauche à droite, mais je ne m'en soucie pas vraiment si 4 est placé au-dessous de 1, 2 ou 3. (Si la position verticale est le critère, il devrait être inférieur à 3; si c'est le placement à l'horizontale, il doit être inférieur à 1.) Quelque chose se passe!
Pas de flexbox est pas la bonne solution pour cette mise en page, vous devez utiliser la maçonnerie ou dans le pire des cas css colonnes, qui est similaire à ma réponse à cette question, de sorte qu'il peut vous aider stackoverflow.com/questions/34417059/...
stackoverflow.com/questions/8470070/...
Un peu en retard à la fête, voici le answer to a similar question par Evan Sharp, auteur de l'Pinterest script et co-fondateur de Pinterest, en expliquant la logique.

OriginalL'auteur Guybrush Threepwood | 2015-12-27

  1. 34

    Flexbox est un "1-dimensions", un système de mise en page: Il peut aligner les éléments le long des lignes horizontales OU verticales.

    Un vrai système de grille est "en 2 dimensions": Il peut aligner les éléments le long des lignes horizontales ET verticales. En d'autres termes, les cellules peuvent s'étendre sur des colonnes et des lignes, qui flexbox ne peut pas faire.

    C'est pourquoi flexbox a une capacité limitée pour la construction de grilles. C'est aussi une raison pour laquelle le W3C a développé un autre CSS3 technologie, de la Grille de Mise en page (voir ci-dessous).

    Dans un conteneur flex avec flex-flow: row wrap, flex éléments doivent envelopper à nouveau lignes.

    Cela signifie que un flex élément ne peut pas envelopper en vertu d'un autre article dans la même ligne.

    Est-il possible pour la flexion des éléments à aligner étroitement les éléments au-dessus d'eux?

    Avis ci-dessus comment div #3 enveloppements ci-dessous div #1, la création d'une nouvelle ligne. Il ne peut pas envelopper sous div #2.

    Par conséquent, lorsque les éléments ne sont pas le plus haut de la ligne, espace blanc reste, la création disgracieuses lacunes.

    Est-il possible pour la flexion des éléments à aligner étroitement les éléments au-dessus d'eux?

    Est-il possible pour la flexion des éléments à aligner étroitement les éléments au-dessus d'eux?

    crédit image: Jefree Sujit

    column wrap Solution

    Si vous passez à flex-flow: column wrap, flex éléments de la pile à la verticale et d'un grille-comme la mise en page est plus réalisable. Cependant, une colonne de direction conteneur a trois problèmes potentiels dès le départ:

    1. Il élargit le conteneur à l'horizontale, et non verticale (comme le Pinterest de mise en page).
    2. Il exige le conteneur d'avoir une hauteur fixe, de sorte que les éléments de savoir où l'envelopper.
    3. De cette écriture, il a une carence dans tous les principaux navigateurs où le conteneur n'est pas développée pour accueillir des colonnes supplémentaires.

    Comme un résultat, une colonne de direction conteneur peut ne pas être réalisable dans de nombreux cas.

    D'Autres Solutions

    OriginalL'auteur Michael_B

  2. 4

    Ce que vous voulez peut être réalisé dans des 3 de 2 manières, CSS sage:

    1. flexbox:

        .parent {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: {max-width-of-container} /* normally 100%, in a relative container */
        min-height: {min-height-of-container}; /* i'd use vh here */
    }
    .child {
        width: {column-width};
        display: block;
    }

    2. CSS colonnes

    (cette solution a le très soignée avantage de de la colonne span - très pratique pour les titres). L'inconvénient est de commandes d'articles dans les colonnes (première colonne contient le premier tiers de l'articles et ainsi de suite...). J'ai fait un jsFiddle pour cela.

        .parent {
        -webkit-columns: {column width} {number of columns}; /* Chrome, Safari, Opera */
        -moz-columns: {column width} {number of columns}; /* Firefox */
        columns: {column width} {number of columns};
    }
    .child {
         width: {column width};
    }
    /* where {column width} is usually fixed size 
     * and {number of columns} is the maximum number of columns.
     * Additionally, to avoid breaks inside your elements, you want to add:
     */
    .child {
        display: inline-block;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }

    3. Maçonnerie plugin

    positionnement absolu après le calcul de rendu d'élément de tailles, via JavaScript (maçonnerie plugin).

    #1 ne fonctionne pas pour moi sur le dernier Firefox (je devrais mettre à jour avec une aire de jeux exemple; va le faire). #2 vient effectivement de très près avec quelques bizarreries d'être travaillé, mais je comprends qu'il utilise le nouveau système de grille CSS qui a très mauvaise prise en charge du navigateur.
    Vous avez raison à propos de #1. Je n'étais pas capable de le faire fonctionner à l'aide de flex. Pas sûr de ce que tu veux dire par "mauvaise prise en charge du navigateur". Pouvez-vous m'indiquer un certain nombre, s'il vous plaît? Je pense que #2 a des problèmes pour moins de 5% des utilisateurs. Corrigez-moi si je me trompe.
    Si vous regardez l'Utilisation Relative des statistiques, le système de réseau n'est pas prise en charge pour un grand nombre d'utilisateurs, donc c'est probablement pas prêt à la production de encore. C'est une excellente solution si, merci pour ça. caniuse.com/#search=grid
    Fascinante. Pouvez-vous repérer les différences entre grille et colonnes?
    lol, c'était du sarcasme? En tout cas, vous avez raison.

    OriginalL'auteur Andrei Gheorghiu