Flexbox wrap - alignement différent pour la dernière ligne

Je suis à l'aide de flex zone d'aligner deux éléments à gauche et à droite du conteneur, tandis que la verticale du centre-alignement. Voici un exemple très simple de ce que je suis en train de réaliser.

HTML:

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>

CSS:

.container {
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
}

Voici la jsfiddle de l'exemple.

Cela fonctionne parfaitement bien si l'écran est assez large pour s'adapter à la fois interne divs sur une ligne. Toutefois, lorsque la taille de l'écran est de petite taille (par exemple un téléphone mobile) et les divs wrap sur la deuxième ligne, le second devient également aligné sur le côté gauche (c'est à dire flex-start). Comment puis-je forcer le deuxième div toujours être aligné contre le droit de frontière, peu importe si c'est sur la première ligne ou enroulée sur le second?

EDIT: Dans l'exemple, je lui ai donné une largeur fixe pour les deux éléments enfants - c'est pour des raisons de simplicité. Dans la vie réelle demande, à toutes les largeurs changent dynamiquement en fonction du contenu de lire à partir de la base de données au moment de l'exécution. Par conséquent, toute solution qui est basée sur des dimensions fixes ne fonctionnera pas.

Je pense que vous avez confondu avec ce que align-self. La propriété se réfère à la façon dont les éléments sont alignés le long de l'axe transversal (puisque vous êtes à l'aide de la ligne comme le flex-direction, la croix de l'axe se réfère à l'axe vertical). Il est pour l'instant pas de justify-self attribut encore. Voir: css-tricks.com/snippets/css/a-guide-to-flexbox
Vous avez raison, j'ai confondu. J'ai mis à jour ma question en conséquence. Néanmoins, j'ai toujours le problème d'avoir à aligner le deuxième div à droite, peu importe si c'est sur la première ligne sur l'enveloppe.

OriginalL'auteur Aleks G | 2014-11-17

  1. 0

    J'ai trouvé une solution mais c'est plutôt "hacky" dans la nature (voir la démo ici, l'explication plus tard), dans le sens qu'il faut explicitement connaître la largeur du conteneur parent qui sera le déclencheur d'un changement de présentation basé sur @media.

    La raison pour laquelle votre code n'est pas le travail, c'est à cause de la confusion sur la manière align-self œuvres. Dans la flexbox modèle, "align" fait référence à l'alignement le long de la croix-axe (c'est à dire dans un sens conventionnel du terme de "ligne" l'orientation de la page, qui va renvoyer à l'alignement vertical), alors que "justifier" fait référence à l'alignement le long de l'axe principal (c'est à dire la ligne). Pour mieux expliquer mon point, je me permets de joindre une image de Chris Coyier de son flexbox guide:

    Flexbox wrap - alignement différent pour la dernière ligne

    Par conséquent, align-self: flex-start signifie dire la .first de manière à aligner le haut du récipient, et align-self: flex-end signifie dire .second pour s'aligner sur le fond du récipient. Dans ce cas, puisque vous n'avez pas déclaré explicitement la hauteur pour le parent, le parent prendra de la hauteur de son plus haut de l'enfant. Depuis deux .first et .second sont 100px de haut, le parent aura aussi calculé la hauteur de 100px, par conséquent, ne faisant aucune différence dans l'alignement (car les deux à être au même niveau que le début et la fin de l'axe transversal).

    Un hack serait de commutation de la flex-direction à la ligne, avec les restrictions suivantes: Vous savez quelle est la largeur de votre bac, ou l'explicite largeurs de ses enfants. Dans ce cas, le point d'arrêt sera à 400px, où .first et .second va se croisent les uns les autres.

    .container {
    width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100px;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
    align-self: flex-start;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
    align-self: flex-end;
}

@media screen and (max-width: 400px) {
    .container {
        height: 200px;
    }
}

    Puis encore une fois, c'est une preuve-de-concept de violon, modifié à partir de votre original: http://jsfiddle.net/teddyrised/cncozfem/2/

    il vous demande explicitement de connaître la largeur du conteneur parent qui sera le déclencheur d'un changement de présentation - cette partie rend la solution impraticable, comme la taille de l'enfant conteneurs n'est pas fixe et est ajustée de manière dynamique en fonction de leur contenu. Par conséquent, toute solution de base de toute taille fixe n'est pas d'aller travailler
    Alors vous êtes hors de la chance. Aussi, il aide à préciser que dans votre question initiale. Vous avez donné votre deux éléments enfants explicite largeurs. Si les largeurs sont dynamiques, pourquoi ne pouvez-vous pas utiliser la bonne vieille float?
    point, j'ai rajouté un edit.

    OriginalL'auteur Terry