Discussion :

[NoobX]

Bonjour @ tous,

Je cherche a interrompre une ligne de flex-item arbitrairement comme pourrai le faire un clear:left sur des éléments alignés via float.

A titre d'exemple voici une version qui fait précisément ce que je veux mais avec des float :
http://jsfiddle.net/v44ng73u/1/

Voici la version en display:flex que je n'arrive pas à utiliser :
http://jsfiddle.net/vjd8rrw8/3/

Cela semble impossible, ce qui m’étonne pas mal à vrai dire ....

J'ai essayé pendant des heures et regardé dans les Cours et tutoriels pour apprendre CSS sans obtenir le bon résultat.
Même en jouant avec les :before/:after.

Merci

Bonnes fêtes

[NoSmoking]

Bonjour,
pourquoi vouloir utiliser un mode de boîte flex si le mode float te conviens ?

Pour faire passer à la ligne tu peux regarder du coté de flex-wrap:wrap;, mais pour que cela passe à la ligne il faut que la ligne soit pleine.

[NoobX]

Merci de ta réponse NoSmoking

Concernant flex-wrap:wrap je pensais l'avoir mis. c'est désormais chose faites bien que cela ne répond pas à mes besoins.

J'utilise le mode de boite flex pour tous les autres avantages qu'il procure : hauteur égale, reste dans le flux ....

Bon ça m'avance pas tout ça ....

Je ne comprends pas que cela ne soit pas possible oO

[NoSmoking]

Tu peux essayer de ruser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.bloc{
    width:32%; /* 3 éléments ne tiennent pas (1+32+1)*3 */
    margin:1%;
    background: #ccc;
}

J'utilise le mode de boite flex pour tous les autres avantages qu'il procure : hauteur égale, reste dans le flux ....

il existe également display:table accessoirement mieux supporté.

[NoobX]

La solution qui consiste à jouer sur la largeur ne peu être utilisé dans mon cas de figure car je ne connais pas la largeur restante (et je ne peux pas utiliser de JS)

A propos du mode table, penses-tu qu'il soit possible de forcer un retour à la ligne d'un enfant (table-cell) ?
Je crains que non, hélas

[NoSmoking]

Ne sachant pas où tu veux réellement en venir je ne saurais te conseiller plus avant.

Le mode table ne te permettra pas plus d'envoyer un élément à la ligne comme cela.

[danielhagnoul]

On ne peut pas "casser" (avec clear ou float) une mise en page "flex", mais avec un peu d'entraînement on arrive à jouer sur la disposition des "bloc" avec "justify-content", "align-items", "order" et "align-self".

Exemple.