[Résolu] Flexbox couleur de fond

Bonjour,
une question bête : je fais une flexbox pour un menu.

.flexbox {
    display: flex;
	font-size: 1em;
	text-align: center;
	flex: 1;
	}
	.flexbox > * + * {
  margin-left:10px;
	}
	/* colors */
   .flexbox > div:nth-child(1){ background : #009246; }
   .flexbox > div:nth-child(2){ background : #F1F2F1; }
   .flexbox > div:nth-child(3){ background : #CE2B37; }

Or, certaines ont une ligne et d'autres 2 et je n'arrive pas à les centrer verticalement. J'ai lu le tutoriel et je n'ai pas trouvé la solution.
Qu'elle est mon erreur ?
Merci

Bonjour,

Tu devrais tester :

.flexbox {
  ...
  align-items: center;
}

Exemple : https://codepen.io/anon/pen/JJgxrv
Modifié par SolidSnake (21 Jul 2017 - 07:48)

Bonjour et merci encore de me répondre.
J'avais déjà essayé, mais certainement mal
avec le premier script cela donne la figure gauche et avec align-items: center; en sus, la figure droite. La capture est mal faite, mais il ne faut voir que le texte.

Merci

Bonjour,

Et du coup tu perds l'étirement vertical c'est ça ? C'est normal car ce qui fait l'étirement c'est

align-items: strech;

qui est par défaut. Or en changeant la valeur à center on enlève ce fonctionnement.

Tu peux gérer le centrage horizontal en rajoutant un élément juste pour le texte à l'intérieur de chaque div :
https://jsfiddle.net/shnjkay0/

Merci pour avoir résolu mon problème.

Hello,

Je me permets de rajouter qu'il est possible d'y parvenir sans ajouter d'élément supplémentaire, en indiquant que tes flex-items deviennent également des flex-containers :

.flexbox > * {
    display: flex;
    align-items: center;
}

Exemple : https://codepen.io/raphaelgoetter/pen/yoBYpE?editors=1100

Wow... le texte agit comme ça sans le mettre dans un élément fils ?!
J'avais loupé ca dans l'utilisation de flex, je me coucherai moin bête et ça va me régler pas mal de soucis ! hahaha !

Merci grand moineau
Modifié par _laurent (21 Jul 2017 - 16:42)

_laurent a écrit :
Wow... le texte agit comme ça sans le mettre dans un élément fils ?!

Oui, le contenu anonyme devient un flex-item comme les vrais fils

_laurent a écrit :
Merci grand moineau

Euh, ça a l'air d'être un compliment, merci !

Raphael a écrit :
Euh, ça a l'air d'être un compliment, merci !

je voulais dire "grand manitou" au départ mais comme Game of Thrones vient de reprendre....

Merci Raphael pour ce résultat et aussi pour tes bouquins qui m'aident toujours beaucoup.
Par contre, j'ai changé de méthode et mon menu est composé par un <ul> et des <li>.
Le code a changé aussi (j'essaie de m'adapter ) et cela marche bien sauf la couleur du texte a une ligne: je vous donne l'essentiel :

.navbarre > ul { 
	display: flex;
	justify-content:space-between;
	flex-direction: row;
	font-weight: bold; /*en 14px; */	
	width: 100%;
} 
.navbarre > ul > li { /* concerne les grands titres non cachés */
	position:relative; /* permet de bien positionner le menus en dessous */
	text-align: center;/* permet de centrer les grands titres*/
	padding: 0.3em 0.5em 0.5em 0.5em ; 
}
.navbarre > * {
    display: flex;
    align-items: center;
}

Que dois-je changer pour ne pas obtenir cela :

Merci d'avance

Bonjour,
après de nombreux essais, je me suis aperçu que le code n'était pas dans la bonne balise. Avec cela, c'est bon et la couleur est bien répartie !
Merci à tous.
.navbarre > ul {
display: flex;
justify-content:space-between;
flex-direction: row;
font-weight: bold; /*en 14px; */
width: 100%;
}
.navbarre > ul > li { /* concerne les grands titres non cachés */
display: flex;
align-items: center;/*aligne les grands titres verticalement*/
position:relative; /* permet de bien positionner le menus en dessous */
text-align: center;/* permet de centrer les grands titres*/
padding: 0.3em 0.5em 0.5em 0.5em ;
}