Flexbox / centrer page et footer en bas

Bonjour

Je bataille toujours avec flexbox, sur ce layout j'essaie de centrer la totalité de la page avec la div pub et surtout de faire passer la div footer sous la boite div carte

Migraine ......! Je me noie dans flexbox

Si vous avez une piste, des conseils ?

Merci

http://goxo.eu/flex/layout11.html

body {display: flex; 
  min-height: 100vh; }
 header{background: dodgerblue} 
.contenair {width:70%; margin:auto;background-color:tomato }
.wrapper {background: orange; 
  display: flex; 
  flex-direction: row; }
.aside1 {flex: 1;background: olivedrab; }
#carte { flex: 3;background: hotpink;}
footer{background: yellow;}
.pub {background: slategray;}
img{width:100%;height:auto;}

<div class="contenair">
<header>
<h1>header</h1>
</header>
<div class="wrapper">
<aside class="aside1">aside</aside>
<div id="carte">carte<img src="images/plan.png" width="800" height="558"></div>
<footer>footer!</footer>
</div> <!-- /wrapper -->
</div> <!-- /contenair -->
<div class="pub"><img src="img/abara.jpg"><p>Pub</p></div>

si j'ai compris l'effet rechercher, je te propose ces quelques corrections (voir commentaires).

body {
  display: flex;
  min-height: 100vh;
  margin: auto;
  justify-content: center;/* centre les elements enfants */
}

header {
  background: dodgerblue
}

.contenair {
  width: 70%;
  background-color: tomato
/* pas de margin:auto necessaire */
}

.wrapper {
  background: orange;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;/* pour faire passer le pied dessous */
}

.aside1 {
  flex: 1;
  background: olivedrab;
}

#carte {
  flex: 3;
  background: hotpink;
}

footer {
  background: yellow;
  width: 100%;/* il passe en dessous et prend toute la largeur */
}

.pub {
  background: slategray;
  min-height: 100vh;/* si besoin */
}

img {
  width: 100%;
  height: auto;
}

Modifié par gcyrillus (01 Mar 2016 - 15:21)

Merci beaucoup gcyrillus

C'est exactement ce que je cherchais à faire depuis ce matin, merci pour ton code super commenté, le meilleur des tutos

Maintenant je vais essayé de rendre cette page responsive, pas gagné ....???

Il faut que je fasse passer la div pub sous le footer .....!

Bon am

Amicalement

BB
Modifié par africa (01 Mar 2016 - 15:40)

flex-wap:wrap; sur body et width:70% sur pub ... , même punition que pour le footer
Modifié par gcyrillus (01 Mar 2016 - 16:48)