26425 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me suis mis à flexbox il y a quelques mois, notammant avec l'ouvrage de Raphaël Goetter "Flexbox, plongez dans les css modernes".

Je bute sur quelque chose qui pourtant me semble simple en apparence:
Soit, une DIV qui est le conteneur flex et à l'intérieur deux DIV enfants.
Sur l'axe horizontal, première DIV enfant doit être centrée horizontalement et verticalement et la deuxième DIV enfant doit être alignée à droite du conteneur flex et centrée verticalement.

Pour finir, pour que cela soit responsive, il faut que la deuxième DIV enfant passe en dessous de la première en dessous d'une certaine largeur d'écran.
Un "flex-flow: row wrap;" devrait suffire.

Voici mon code html:

<div class="box">
		  <div class="div_centree">1ère DIV (à centrer horizontalement et verticalement)</div>
		  <div class="div_aDroite">2ème DIV (à aligner à droite et à centrer verticalement)</div>
		</div>


Voici mon code css:

.box {
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  /*pour le responsive*/
  flex-flow: row wrap;
}
.box .div_centree {
    width: 150px;
    height: 120px;
    background-color: yellow;
}
.box .div_aDroite {
    justify-content: flex-end;
    width: 150px;
    height: 70px;
    background-color: green;
}


Merci d’avance,

Cordialement,

Hervé
Modifié par Fennec72 (07 Nov 2018 - 17:46)
Je vois plus la solution avec "display: grid" et une <div> "bouche-trou" :
( la nature a horreur du vide )
https://codepen.io/bazooka07/pen/BGjwaW
Mais il y a encore quelque petit souci :
essayer un "white-space: no-wrap" sur la <div> de droite et de remplir le bouche-trou avec "&nbsp;"
Peut-être en inversant l'ordre de remplissage ?
Modifié par bazooka07 (07 Nov 2018 - 21:32)
Salut Fennec,

je ne suis pas exactement sûr du résultat que tu souhaites obtenir, mais voici 2 solutions avec flexbox : https://codepen.io/wollsale/pen/eQJEqL?editors=0100

La première centre le premier élément par rapport à l'espace restant lorsque le second élément est aligné à droite.

La seconde centre le premier élément par rapport à la moitié du conteneur et aligne le second à droite.

En espérant que ça aide !
Wollsale a écrit :
Salut Fennec,

je ne suis pas exactement sûr du résultat que tu souhaites obtenir, mais voici 2 solutions avec flexbox : https://codepen.io/wollsale/pen/eQJEqL?editors=0100

La première centre le premier élément par rapport à l'espace restant lorsque le second élément est aligné à droite.

La seconde centre le premier élément par rapport à la moitié du conteneur et aligne le second à droite.

En espérant que ça aide !

Merci de tes solutions, par contre, ce que je cherche, c'est centrer le premier élément par rapport à 100% de la largeur du conteneur.

Et puis j'avoue que je ne maitrise pas encore assez les préprocesseurs css et tu donne des solution en scss. Smiley cligne

Comme je compte me mettre à SCSS dans les prochains mois, ta solution pourras sans doute m'inspirer à ce moment-là.
Fennec72 a écrit :

Merci de tes solutions, par contre, ce que je cherche, c'est centrer le premier élément par rapport à 100% de la largeur du conteneur.

Et puis j'avoue que je ne maitrise pas encore assez les préprocesseurs css et tu donne des solution en scss. Smiley cligne

Comme je compte me mettre à SCSS dans les prochains mois, ta solution pourras sans doute m'inspirer à ce moment-là.


Okay, je comprend mieux ! Voilà la solution, et en CSS ! Smiley smile
https://codepen.io/wollsale/pen/eQJEqL?editors=1100

Je pense que c'est ce que tu recherches.
@Wollsale,

Mobile first !!! Smiley fache

Ta solution ne fonctionne pas. Colle du "Lorem ipsum" dans la boite du milieu et tu verrras que cela déborde.
Perso, j'essaie d'éviter les "position: absolute" quand c'est possible pour éviter les débordements. Cela devient pénible parfois. Mais cela n'est pas toujours évident.
Voici ma solution qui fonctionne avec "lorem ipsum" :
<div class="flex-box">
	<div class="cell-bouche-trou">&nbsp;</div>
	<div class="cell-centre">centré / milieu<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utali</div>
	<div class="cell-droite">droite / milieu</div>
</div>

.cell-centre { background-color: moccasin; }
.cell-droite { background-color: lavender; white-space: nowrap; }
.cell-bouche-trou {
	display: none;
	background-color: inherit;
	color: transparent;
}
.flex-box > div {
	padding: 1rem;
	text-align: center;
	justify-self: center;
	align-self: center;
}
.flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #888;
	text-align: center;
}
.jauge::after {
	content: 'Je fais moins de 36rem';
	display: block;
	padding: 0.75rem;
	text-align: center;
	background-color: green;
	color: #fff;
}

@media screen and (min-width: 36rem) {
	.cell-bouche-trou { display: initial; }
	.flex-box { align-items: center; flex-wrap: nowrap; }
	.flex-box .cell-centre { margin: 0 1rem; }
	.flex-box .cell-droite,
	.flex-box .cell-bouche-trou {
		flex-basis: 20rem;
		flex-grow: 1;
	}
	.jauge::after {
		content: 'Je dépasse les 36rem';
		background-color: darkred;
	}
}

Voir la démo :
https://codepen.io/bazooka07/pen/MzewWO

Ma solution repose sur l'emploi de flex-grow et flex-basis
La boite du centre s'adapte à son contenu sans "péter" le rendu du flux des éléments HTML.
https://la-cascade.io/flex-grow/
https://la-cascade.io/flex-basis/
Modifié par bazooka07 (09 Nov 2018 - 11:58)
bazooka07 a écrit :
@Wollsale,

Mobile first !!! Smiley fache

Ta solution ne fonctionne pas. Colle du "Lorem ipsum" dans la boite du milieu et tu verrras que cela déborde.
Perso, j'essaie d'éviter les "position: absolute" quand c'est possible pour éviter les débordements. Cela devient pénible parfois. Mais cela n'est pas toujours évident (...)


Hey Bazooka !

1) La solution fonctionne. Evidemment le texte dépasse de la boxe car on lui a attribué une hauteur fixe pour le démo. Supprime cette hauteur ou remplace là avec une min-height et ça fonctionne.

2) Je n'utilise pas de position absolute (si ce n'est sur un pseudo-élément qui indique le centre de la div pour illustrer la démo).

3) Quant au "mobile first", il ne s'agit pas d'une convention mais d'un choix à appliquer au cas par cas. Ce n'est pas toujours un bon choix, et ce choix est entre les mains de Fennec qui connait mieux que nous le contexte de son application.

Ne te fâche pas donc comme ça Smiley cligne

@Fennec72 — Comme tu le vois, les deux façons apportent deux solutions au comportement différent, mais les 2 sont bonnes à prendre : 2 éléments contenants avec une width de 33% poussés à droite, ou 3 éléments dont 1 invisible. Par choix personnel, j'ai le réflexe d'éviter tant que possible les éléments invisibles, mais ça ne change absolument rien à l'efficacité de ton, d'où ma solution sans éléments invisibles (petit côté OCD ^^). Tout dépend de ce que tu veux faire avec tout ça.
bazooka07,
@Wollsale,

Merci à tous les deux pour vos conseils.

Je m'en suis fortement inspiré pour arriver au résultat que je cherchait.

Code HTML:

    	<h1>Display: flex</h1>
<div class="Logo_cadreTitreSlogan_Recherche">
	<div class="cell-bouche-trou">&nbsp;</div>

	<div class="Logo_cadreTitreSlogan">
		<img src="logo.png">
		<div class="cadreTitreSlogan">
				<div class="TitreSite">nom du site</div>
				<div class="SloganSite">slogan du site</div>
		</div>
	</div><!-- Fin .Logo_cadreTitreSlogan -->
	
	<div class="cell-droite">

		<div class="recherche_entete"> Formulaire de recherche</div>


	</div><!-- Fin .cell-droite -->
</div><!-- Fin .Logo_cadreTitreSlogan_Recherche -->

<div class="jauge"></div>


Code CSS:

.Logo_cadreTitreSlogan_Recherche {
	display: flex;
  	align-items: center;
	background-color: #888;
	text-align: center;
	height: 200px;
}

.Logo_cadreTitreSlogan_Recherche .cell-droite,
.Logo_cadreTitreSlogan_Recherche .cell-bouche-trou  {
	flex-basis: 20rem;
	flex-grow: 1;
}
	
.Logo_cadreTitreSlogan_Recherche .Logo_cadreTitreSlogan {
 margin: 0 1rem;
}

.Logo_cadreTitreSlogan {
  background-color: moccasin;
  height: 100px;
  width: 300px;
  min-width: 300px;
	 }


.cell-droite {
	background-color: lavender; 
}

.cell-bouche-trou {
	background-color: inherit;
	color: transparent;
}
body > div > div {
	padding: 1rem;
	text-align: center;
}


.jauge::after {
	content: 'Je dépasse les 640px';
	display: block;
	padding: 0.75rem;
	text-align: center;
	background-color: orange;
	color: #fff;
}


.recherche_entete {
	background-color: yellow;
	height: 30px;
	width: 210px;
	float: right;

}

@media screen and (max-width: 640px) {
	.cell-bouche-trou { display: none; }

	.Logo_cadreTitreSlogan_Recherche {
		flex-wrap: wrap; }

	.Logo_cadreTitreSlogan {
		margin-left: calc( (100% - 300px) / 2 )
	}

	.cell-droite { background-color: lavender;
               white-space: nowrap; }

	.recherche_entete {
		float: none;
		margin: 0 auto

	}

	.jauge::after {
		content: 'Je fais moins de 640px';
		background-color: violet;
	}
}     

Modifié par Fennec72 (11 Nov 2018 - 16:55)