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"

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)