{"id":1105,"date":"2018-03-18T15:26:45","date_gmt":"2018-03-18T14:26:45","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=1105"},"modified":"2019-03-11T09:23:32","modified_gmt":"2019-03-11T08:23:32","slug":"mise-en-page-flex","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=1105","title":{"rendered":"Mise en Page Flex"},"content":{"rendered":"\n

Les bo\u00eetes HTML (conteneurs qui renferment le contenu de votre site), de type div, header, footer, nav, main, section, article, aside, etc. doivent \u00eatre r\u00e9partis sur la page afin de cr\u00e9er la mise en page.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Il existe plusieurs techniques pour cela :<\/p>\n\n\n\n

– Les tableaux (technique aujourd’hui abandonn\u00e9e pour la mise en page; les tableaux ne servent qu’\u00e0 faire des \u2026 tableaux ou des newsletters)
\n– La propri\u00e9t\u00e9 float (de moins en moins utilis\u00e9e, mais qui peut d\u00e9panner)
\n– le comportement inline-block (souvent r\u00e9serv\u00e9 aux galeries d’images ou aux menus)
\n– le positionnement position: absolute \/ relative \/ fixed (\u00e0 connaitre absolument car encore tr\u00e8s utile pour placer des \u00e9l\u00e9ments sur la page et n\u00e9cessaires dans des situations bien particuli\u00e8res, comme les effets de survol par exemple)
\n– FlexBox (c’est la technique moderne que nous allons utiliser principalement)
\n– CSS Grid (cette technique, tr\u00e8s puissante, est trop r\u00e9cente et n’est pas encore reconnue correctement par tous les navigateurs; c’est l’avenir mais il faut la r\u00e9server \u00e0 des projets tr\u00e8s sp\u00e9cifiques. Nous ne l’utiliserons donc pas).<\/p>\n\n\n\n

Vous trouverez toutes les explications n\u00e9cessaires sur FlexBox \u00e0 ces deux URL :<\/p>\n\n\n\n

https:\/\/la-cascade.io\/flexbox-guide-complet\/<\/a>
\nhttps:\/\/openclassrooms.com\/courses\/apprenez-a-creer-votre-site-web-avec-html5-et-css3\/la-mise-en-page-avec-flexbox<\/a><\/p>\n\n\n\n

Trois types de mise en page \u00e0 partir du m\u00eame code HTML<\/h4>\n\n\n\n

Les flexbox permettent souvent d’adapter la mise en page en conservant le m\u00eame code HTML. Il est parfois n\u00e9cessaire cependant de rajouter des containers interm\u00e9diares en HTML afin de moduler plus finement la disposition des bo\u00eetes principales.<\/p>\n\n\n\n

Ici plusieurs typologies courantes de mise en page sont illustr\u00e9es, \u00e0 partir du m\u00eame code HTML. Seuls les CSS vont \u00eatre diff\u00e9rents.<\/p>\n\n\n\n

Voici le code HTML :<\/p>\n\n\n\n

<div id=\"wrap\"><\/code>
\n <header class=\"tete\"><\/code>
\n <h2>HEADER<\/h2><\/code>
\n <\/header><\/code>
\n <nav class=\"menu\"><\/code>
\n <h2>NAV<\/h2><\/code>
\n <\/nav><\/code>
\n <main class=\"contenu\"><\/code>
\n <h2>MAIN CONTENT<\/h2><\/code>
\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, quo minima voluptatibus inventore tenetur a, eos dolor nulla corrupti omnis dolores nobis repellat quasi ipsam voluptate esse, quam alias magnam!<\/p><\/code>
\n <\/main><\/code>
\n <footer class=\"pied\"><\/code>
\n <h2>FOOTER<\/h2><\/code>
\n <\/footer><\/code>
\n <\/div><\/code><\/p>\n\n\n\n

1. Disposition standard<\/h4>\n\n\n\n

Dans ce cas de figure, on utilise flex en colonne. Mais cela traduit le comportement normal. FlexBox est presque inutile dans cette configuration standard.<\/p>\n\n\n\n

Voici le code CSS :<\/p>\n\n\n\n

#wrap {
\ndisplay: flex;
\nflex-direction: column;
\n}
\n.tete {
\nbackground-color: cadetblue;
\n}
\n.menu {
\nbackground-color: gold;
\n}
\n.contenu {
\nbackground-color: hotpink;
\n}
\n.contenu p {
\ntext-align: left;
\nmargin-left: 10px;
\n}
\n.pied {
\nbackground-color: yellowgreen;
\n}<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

2. Nav lat\u00e9rale \u00e0 gauche<\/h4>\n\n\n\n

Voici le code CSS :<\/p>\n\n\n\n

#wrap02 {
\ndisplay: flex;
\nflex-direction: row;
\nflex-wrap: wrap;
\n}
\n.tete {
\nbackground-color: cadetblue;
\nflex: 1 100%;
\n}
\n.menu {
\nbackground-color: gold;
\nflex: 1 20%;
\n}
\n.contenu{
\nbackground-color: hotpink;
\nflex: 1 80%;
\n}
\n.contenu p {
\ntext-align: left;
\nmargin-left: 10px;
\n}
\n.pied {
\nbackground-color: yellowgreen;
\nflex: 1 100%;
\n}<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

3. Nav sur la m\u00eame ligne que le header<\/h4>\n\n\n\n

C’est une configuration courante, g\u00e9n\u00e9ralement associ\u00e9e au fait de rendre l’ensemble header + nav fixes en haut de page. Cet effet n\u00e9cessite un conteneur suppl\u00e9mentaire pour englober les deux containers.<\/p>\n\n\n\n

Voici, en version ed base, le code CSS :<\/p>\n\n\n\n

#wrap {
\ndisplay: flex;
\nflex-direction: row;
\nflex-wrap: wrap;
\n}
\n.tete {
\nbackground-color: cadetblue;
\nflex: 1 30%;
\n}
\n.menu {
\nbackground-color: gold;
\nflex: 1 70%;
\n}
\n.contenu {
\nbackground-color: hotpink;
\nflex: 1 100%;
\n}
\n.contenu p {
\ntext-align: left;
\nmargin-left: 10px;
\n}
\n.pied {
\nbackground-color: yellowgreen;
\nflex: 1 100%;
\n}<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Voir \u00e9galement cette ressource :<\/p>\n\n\n\n

\n
A Complete Guide to Flexbox<\/a><\/blockquote>