Bonjour,

J'ai un "flex-container" (class="f-c") avec deux "flex-items" (class="f-i-1" et class="f-i-2"). Je souhaiterais que le premier "flex-item" soit en haut de la page et que le second soit au milieu de la page.
Comment pourrai-je faire cela avec flexbox ?

Code actuel : https://codepen.io/Titouan79/pen/OedVMN

Merci d'avance pour vos réponses

-
Edité par TitouanDev 10 juillet 2019 à 11:31:47

Salut,

Je vais avoir besoin de plus de précision pour t'aider, quand tu dis le premier en haut et le second au milieu tu parle du même niveau de hauteur ? ou l'un en haut et l'autre en plein milieu de la page ?

Sur ton exemple tu met les deux éléments "FI" dans des containers "FC" pour leurs donner exactement les même propriétés css, c'est voulu ou pas ?

-
Edité par FloJDM 10 juillet 2019 à 12:03:59

En fait, il faudrait que le premier soit centré horizontalement et en haut de la page (verticalement). Le second doit être centré verticalement ET horizontalement dans la page.

Et non, je faisait juste des tests, donc ce n'est pas voulu. Je t'ai remis le codepen à l'original (comme expliqué sur le premier message).

-
Edité par TitouanDev 10 juillet 2019 à 12:10:54

Bon du coup c'est pas très très propre mais ça fonctionne. la ou c'est important c'est de voir la propriété nth-child si tu ne la connais pas. Il y vraiment moyen d'améliorer ça et de faire plus propre avec un peu plus de temps. Je me demande d'ailleurs si c'est pas plutôt "Grid" qu'il faudrait utiliser ici.

https://jsfiddle.net/82f1wrks/

-
Edité par FloJDM 10 juillet 2019 à 12:30:51

Effectivement je connait déjà cette propriété, mais je n'avais pas du tout pensé à mettre un troisième flex-item pour faire remonter le deuxième et ajuster, c'est pas con du tout.

Merci

-
Edité par TitouanDev 10 juillet 2019 à 12:39:56

Bonjour,

Il vaut mieux éviter de définir des éléments html uniquement pour une mise en forme. Il faut essayer de définir dans votre page, uniquement les éléments définissant votre contenu. 

Le positionnement flex permet de d'utiliser la propriét  margin:auto sur tous les axes. Vous pouvez utiliser cela pour centrer verticalement le deuxième élément

.flex-item:nth-child(2) {
  background: blue;
  margin:auto 0;
 
}

AnneHuard a écrit:

Bonjour,

Il vaut mieux éviter de définir des éléments html uniquement pour une mise en forme. Il faut essayer de définir dans votre page, uniquement les éléments définissant votre contenu. 

Le positionnement flex permet de d'utiliser la propriét  margin:auto sur tous les axes. Vous pouvez utiliser cela pour centrer verticalement le deuxième élément

.flex-item:nth-child(2) {
  background: blue;
  margin:auto 0;
 
}

+1 

-
Edité par FloJDM 10 juillet 2019 à 13:46:50

 Bonjour TitouanDev ,

un exemple avec 2 conteneurs

https://codepen.io/Zonecss/pen/GbzQqg