Flexbox : sur l'axe horizontal une DIV centrée et une à droite?

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)

Bonjour Fennec72,
Pour moi, c'est pas possible en 100% flex, je me trompe peut être!
J'ai fait une bidouille pour que cela fonctionne en gardant "absolument flex", mais cela reste de la bidouille
https://codepen.io/Zonecss/pen/pQvywv

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)

Après réflexion, flex-box se comporte mieux que grid-box
voir démo :
https://codepen.io/bazooka07/pen/BGjwaW
Il faut rajouter dans le HTML une <div> "bouche-trou"

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.

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

@Wollsale,

Mobile first !!!

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,
@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)