Flexbox est une technique de positionnement d'élément dans une page web, en CSS3.

Les positionnement sont gérés par 2 axes :

• Main Axes: X vers la droite
• Cross Axis: Y vers le bas

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%;
    }
}