0

Mise en page simple d’une page HTML avec FlexBox

Mise en page simple d’une page HTML avec FlexBox

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Made with Thimble</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="conteneur">
      
      <div id="header">Header</div>
      
      <div id="corps">
        <div id="menu">Menu<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
         <div id="content">Body</div>
      </div>
      
      <div id="footer">Footer</div>
      
    </div>
  </body>
</html>
index.html

 

/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 0;
  font-size: 18px;
  margin: 0;
  color: #444;
}
#conteneur{
  display: flex;
  flex-direction: column;
  margin:0;
}

#corps{
  display: flex;
  flex-direction: row;
  height: auto;
}

#header{
  background-color: blue;
  height: 100px;
}

#corps #menu{
  background-color: yellow;
  flex: 1;
}

#corps #content{
  background-color: #9090b2;
  flex: 3;
}

#footer{
  height: 100px;
  background-color: #00ff5a;
}
style.css

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *