Comment spécifier un élément après quoi envelopper dans CSS flexbox?

vous pouvez accomplir ceci en plaçant ceci sur le conteneur:

ul {
    display: flex;
    flex-wrap: wrap;
}

et sur l'enfant vous mettez ceci:

li:nth-child(2n) {
    flex-basis: 100%;
}

Cela fait que l'enfant représente 100% de la largeur du conteneur avant tout autre calcul. Puisque le conteneur est réglé pour se casser dans le cas où il n'y a pas assez d'espace, il le fait avant et après cet enfant.

=========================

EDIT: C'est vraiment facile à faire avec la grille maintenant: https://codepen.io/anon/pen/mGONxv?editors=1100

=========================

Je ne pense pas qu'on puisse casser après un article spécifique. Le mieux que vous pouvez probablement faire est de changer la base flex à vos points de rupture. So:

ul {
  flex-flow: row wrap;
  display: flex;
}

li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

@media (min-width: 40em;){
li {
  flex-basis: 30%;
}

voici un échantillon: http://cdpn.io/ndCzD

============================================

EDIT: Vous POUVEZ casser après un élément spécifique! Heydon Pickering a déchaîné la magie css dans un article de A List Apart: http://alistapart.com/article/quantity-queries-for-css

EDIT 2: Veuillez jeter un oeil à cette réponse: saut de Ligne en multi-ligne flexbox

@luksak fournit également une grande réponse""

il y a une partie de la spécification qui ressemble certainement à cela... directement dans les sections" algorithme de mise en page flex "et" dimensionnement principal":

sinon, à partir du premier article non collecté, collecter consécutives des éléments un par un jusqu'à ce que la première fois que le prochain l'article collecté n'entrerait pas dans la masse interne du conteneur flexible taille, ou jusqu'à ce qu'une pause forcée est rencontré. Si la première l'objet non collecté ne collerait pas, collectionner juste dans le ligne. Pause est forcé partout où le CSS2.1 page-break-before/page-break-after [CSS21] ou les propriétés CSS3 break-before/break-after [CSS3-BREAK] spécifiez une rupture de fragmentation.

de http://www.w3.org/TR/css-flexbox-1/#main-sizing

cela ressemble certainement (mis à part le fait que page-breaks devrait être pour l'impression), lors de la mise en page potentiellement multi-ligne Flex layout (que je prends à partir de une autre partie de la spécification est un sans flex-wrap: nowrap ) a page-break-after: always ou break-after: always devrait provoquer une rupture, ou envelopper à la ligne suivante.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.child {
  flex-grow: 1;
}

.child.break-here {
  page-break-after: always;
  break-after: always;
}

cependant, j'ai essayé ceci et il n'a pas été mis en œuvre de cette façon...

• Safari (jusqu'à 7)
• Chrome (jusqu'à 43 dev)
• Opéra (jusqu'à 28 dev & 12.16)
• IE (jusqu'à 11)

Il ne fonctionne pas de la façon dont il semble (pour moi, au moins), comme dans:

• Firefox (28+)

échantillon à http://codepen.io/morewry/pen/JoVmVj .

Je n'ai pas trouvé d'autres requêtes dans le bug tracker, donc je l'ai signalé à https://code.google.com/p/chromium/issues/detail?id=473481 .

mais le sujet a pris à la liste de diffusion et, indépendamment de la façon dont il sonne, ce n'est apparemment pas ce qu'ils ont voulu dire impliquer, sauf je suppose pour la pagination. Il n'y a donc aucun moyen d'emballer avant ou après un coffret particulier dans un agencement flex sans imiter des agencements flex successifs à l'intérieur des enfants flex ou sans jouer avec des largeurs spécifiques (par exemple flex-basis: 100% ).

c'est profondément ennuyeux, bien sûr, puisque travailler avec la mise en œuvre de Firefox confirme mon soupçon que la fonctionnalité est incroyablement utile. Mis à part l'amélioration de l'alignement vertical, l'absence rend inutile l'utilisation de la flex layout dans de nombreux scénarios. Le fait de devoir ajouter des balises d'enrubannage supplémentaires avec des mises en page Flex imbriquées pour contrôler le point auquel une rangée d'enrubannage augmente la complexité du HTML et du CSS et, malheureusement, rend souvent order inutile. De même, forcer la largeur d'un article à 100% réduit le potentiel "réactif" du flex layout ou nécessite un grand nombre de requêtes très spécifiques ou des sélecteurs de compte (par exemple, les techniques qui peuvent accomplir le résultat général dont vous avez besoin qui sont mentionnés dans les autres réponses).

au moins les flotteurs avaient clear . Quelque chose soit ajouté à un moment ou à un autre pour ce, on espère.

fixer une largeur minimale sur les éléments enfants créera également un point de rupture. Par exemple briser tous les 3 éléments,

flex-grow: 1;
min-width: 33%; 

S'il y a 4 éléments, le 4ème élément sera enveloppé à 100%. S'il y a 5 éléments, les 4ème et 5ème éléments s'envelopperont et prendront chacun 50%.

assurez - vous d'avoir l'élément parent avec,

flex-wrap: wrap

la seule chose qui semble fonctionner est de mettre flex-wrap: wrap; sur le conteneur et ils font en quelque sorte l'enfant que vous voulez sortir après pour remplir la pleine largeur, donc width: 100%; devrait fonctionner.

Si, toutefois, vous ne pouvez pas étirer l'élément à 100% (par exemple, si c'est un <img> ), vous pouvez appliquer une marge, comme width: 50px; margin-right: calc(100% - 50px) .