28168 sujets

CSS et mise en forme, CSS3

Modérateur
Hello tout le monde,

En surfant sur le net, je suis tombé sur https://flexboxfroggy.com/ . Je me suis amusé à suivre les étapes

Au niveau 24, je n'ai pas réussi. Pour le coup, je donne ma langue au chat. Je pense que quelque chose m'échappe. Ça doit être tout bête. J'ai passé l'après-midi à coder. La fatigue peut être Smiley ohwell

Voici mon code css :

flex-flow: column-reverse wrap;
align-content: space-between;
justify-content: center;


Avez vous une idée ?
Modifié par niuxe (02 Sep 2024 - 10:29)
Bonsoir,


#pond {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column-reverse;
  align-content: space-between;
}


Tu y étais presque, il te manquais juste le wrap-reverse
Modifié par casper2 (01 Sep 2024 - 20:21)
Meilleure solution
Administrateur
Et avec `flex-flow` tu termines avec une ligne en rab :

#pond {
  display: flex;
  flex-flow: column-reverse wrap-reverse;
  justify-content: center;
  align-items: flex-end;
  align-content: space-between;
}
Bonjour,
>> Et avec `flex-flow` tu termines avec une ligne en rab :
exact. Je n'ai pas l'habitude d'utiliser flex-flow, à tort peut être.
Administrateur
casper2 a écrit :
exact. Je n'ai pas l'habitude d'utiliser flex-flow, à tort peut être.
Non tu as raison, on préfère l'éviter aussi chez nous : ça porte à confusion lorsque tu veux rapidement chercher dans quelle direction va l'axe principal.
Modérateur
Raphael a écrit :
Non tu as raison, on préfère l'éviter aussi chez nous : ça porte à confusion lorsque tu veux rapidement chercher dans quelle direction va l'axe principal.


flex-flow, c'est comme background. Les valeurs sont des agrégats de ce type de règle. J'avoue que je l'utilise rarement. Je pense que c'est une question d'habitude d'écriture et lecture.