2020-01-04: Création
Flexbox est une technique de positionnement d'élément dans une page web, en CSS3.
Les positionnement sont gérés par 2 axes :
Source Image : Fondation Mozilla
Il faut créer un container:
<div class="container">
Coté CSS on applique la class suivante:
.container { display: flex; }
.container { display: flex; flex-direction: row; // en ligne (propriété par défaut) justify-content: center; // centré sur l'axe des X justify-content: space-between; // centré sur l'axe des X, espace égale entre justify-content: space-around; // centré sur l'axe des X, espace égale gauche/droite justify-content: space-envely; // centré sur l'axe des X, même espace entre chaque objet }
.container { display: flex; flex-direction: row; // en ligne justify-content: center; // centré sur l'axe des X align-items: stretch; // étirer par rapport au plus haut (propriété par défaut) align-items: center; // centré en Y par rapport à l'objet le plus haut align-items: flex-start; // tout en haut de Y align-items: flex-end; // tout en bas de Y align-items: base-line; // centre sur le ligne de texte }
.container { display: flex; flex-direction: column; // en colone justify-content: center; | X | ----Y----> | V }
.item3 { align-self: flex-end; // à la fin de l'axe Y par rapport autres item align-self: flex-start; // au début de l'axe Y par rapport autres item align-self: stretch; // prend la taille Y du plus grand item }
Par défaut, l'indice d'ordre de chaque item est à “0”
.item3 { order: 1; // ce place après les items order "0" order: -1; // ce place avant les items order "0" }
.item3 { flex-grown: 1; // agrandi sur tout l'espace dispo. ("0" par défaut) flex-basis: 400px; // impose la largeur 400px flex-shrink: 0; // pas de réduction même si écran plus petit // raccourcie: flex: 0 0 600px; //grown shrink basis }
.container { display: flex; flex-direction: row; // en ligne (propriété par défaut) justify-content: center; // centré sur l'axe des X align-items: center; flex-wrap: wrap; // en cas d'écran plus petit, // permet le passage à la ligne des objets qui sort du container align-content: flex-start; // permet de recaler en haut objet }
Ce code permet d'initialiser la page en terme de paddin/marging, 1rem=10px, etc.
* { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; // hérité du html } html { box-sizing: border-box; font-size: 62.5%; // rem vs 16px d'origine des nav. : // - meilleur accessibilité des navigateur: 10/16=0.625 // - permet d'avoir 1rem=10px, plus facile à ce représenter. }
body { font-familly: 'Open Sans', sans-serif; // google font sinon sans-serif font-weight: 400; line-height: 1.6; color:#777; // grey background-image: linear-gradient(to right bottom, #31708E, #5085A5); // dégradé bleu background-size: cover; background-repeat: no-repeat; min-height: 100vh; // 100 viewport height }
.container { max-width: 120rem; // 1200px margin: 8rem auto; // 80px background-color: #FAF9F9; box-shadow: 0 2rem 6rem rgba(0,0,0,0.3); //y x flou rgba; alpha min-height: 50rem; // 500px de haut }
.header { font-size: 1.4rem; height: 7rem; background-color: #FFF; border-bottom: 1px solid #F4F2F2; display: flex; justify-content: space-between; // espace vide entre les objets align-items; center; }
.logo { height: 3.25rem; width: 5rem; margin-left: 2rem; } .search { flex: 0 0 40%; // grown, shrink(pas resize si reduction écran, flex bases display: flex; align-items: center; // sur Y justify-content: center; // sur X } .searchInput { font-familly: inherit; font-size: inherit; color: inherit; background-color: #F4F2F2; border: none; padding: .7rem 2rem; border-radius: 100px; width: 90%; margin-right: -3.25rem } .searchButton { border: none; background-color: #F4F2F2; } .searchIcon { width: 5rem; width: 2rem; fill: #777; //coloration SVG }
Coté HTML :
<div class="content"> <nav class="sidebar"> <ul class="side-nav"> <li class="side-navItem"> <a href="#"> <svg class="side-naveIcon"> <use xlink:href="img/sprite.svg#icon-location"> </use> </svg> <span>location</span> </a> </li> </ul> </nav> </div>
Coté CSS :
.side-navIcon { width: 17.5rem; heigth: 17.5rem; margin-right: 2rem; fill: white; }
Coté HTML:
<div class="btnContainer"> <a href="#" class="reserver">Réserver Maintenant !</a> </div>
Coté CSS:
.btnContainer { display: flex; justify-content: center; } .reserver { text-align: center; flex: 0 0 55%; margin-top: 5rem; margin-bottom: 5rem; padding: 1.5rem 0; border-radius: 25px; text-decoration: none; font-size: 2rem; color: white; background: #31708E; transition: all 0.2s linear; } .reserver:hover { background: #fff; color: black; border: 1px solid #31708E; }
Diminuer la taille de la police en fonction du terminal.
@media screen and (max-width:1200px) { html { font-size: 40%; } }