Exemple avec display: flex;

Salade Tomate Oignon Choucroute garnie Picon bière

Code HTML :


            <article class='container'>
                <a href="">Salade</a>
                <a href="">Tomate</a>
                <a href="">Oignon</a>
                <a href="">Choucroute garnie</a>
                <a href="">Picon bière</a>
            </article>
            

Code CSS :


                .container {
                    display: flex;
                    margin-top: 5%;
                    width:50%;
                    text-align:center;
                    margin-left:30%;   
                } 
                .container a{
                   color: aliceblue;
                    text-decoration: none;
                }
                .container a:focus, 
                .container a:hover{
                    color: rebeccapurple;
                }
                .container a:nth-child(1){
                    background-color: darkblue;
                    padding: 15px;
                }
                .container a:nth-child(2){
                    background-color: coral;
                     padding: 15px;
                }
                .container a:nth-child(3){
                    background-color: greenyellow;
                     padding: 15px;
                }
                .container a:nth-child(4){
                    background-color: crimson;
                     padding: 15px;
                }
                .container a:nth-child(5){
                    background-color: darkgray;
                     padding: 15px;
                }
            

Exemple avec display: flex; avec flex-direction: row-reverse;

Uttiliser pour aligner deux élements

Salade Tomate Oignon Choucroute garnie Picon bière

Code HTML :


            <article class='container_2'>
                <a href="">Salade</a>
                <a href="">Tomate</a>
                <a href="">Oignon</a>
                <a href="">Choucroute garnie</a>
                <a href="">Picon bière</a>
            </article>
            

Code CSS :


                .container_2 {
                    display: flex;
                    flex-direction: row-reverse;
                    margin-top: 5%;
                    width:50%;
                    text-align:center;
                    margin-left:20%;   
                } 
                .container_2 a{
                   color: aliceblue;
                    text-decoration: none;
                }
                .container_2 a:focus, 
                .container_2 a:hover{
                    color: rebeccapurple;
                }
                .container_2 a:nth-child(1){
                    background-color: darkblue;
                    padding: 15px;
                }
                .container_2 a:nth-child(2){
                    background-color: coral;
                     padding: 15px;
                }
                .container_2 a:nth-child(3){
                    background-color: greenyellow;
                     padding: 15px;
                }
                .container_2 a:nth-child(4){
                    background-color: crimson;
                     padding: 15px;
                }
                .container_2 a:nth-child(5){
                    background-color: darkgray;
                     padding: 15px;
                }

            

Exemple avec display: flex; avec flex-direction: column;

Uttiliser pour mettre en colonne une liste

Salade Tomate Oignon Choucroute garnie Picon bière

Code HTML :


            <article class='container_3'>
                <a href="">Salade</a>
                <a href="">Tomate</a>
                <a href="">Oignon</a>
                <a href="">Choucroute garnie</a>
                <a href="">Picon bière</a>
            </article>
            

Code CSS :


                .container_3 {
                    display: flex;
                    flex-direction: column;
                    margin-top: 5%;
                    width: 40%;
                    text-align: center;
                    margin-left: 30%;
                }

                .container_3 a {
                    color: aliceblue;
                    text-decoration: none;
                }

                .container_3 a:focus,
                .container_3 a:hover {
                    color: rebeccapurple;
                }

                .container_3 a:nth-child(1) {
                    background-color: darkblue;
                    padding: 15px;
                }

                .container_3 a:nth-child(2) {
                    background-color: coral;
                    padding: 15px;
                }

                .container_3 a:nth-child(3) {
                    background-color: greenyellow;
                    padding: 15px;
                }

                .container_3 a:nth-child(4) {
                    background-color: crimson;
                    padding: 15px;
                }

                .container_3 a:nth-child(5) {
                    background-color: darkgray;
                    padding: 15px;
                }


            

Exemple avec display: flex; avec flex-direction: row; et justify-content: space-around;

Uttiliser pour centrer le menu et séparer chacun des menu suivant l'espace disponible

Salade Tomate Oignon Choucroute garnie Picon bière

Code HTML :


            <article class='container_4'>
                <a href="">Salade</a>
                <a href="">Tomate</a>
                <a href="">Oignon</a>
                <a href="">Choucroute garnie</a>
                <a href="">Picon bière</a>
            </article>
            

Code CSS :


                .container_4 {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    margin-top: 5%;
                    width: 50%;
                    text-align: center;
                    margin-left: 25%;
                }

                .container_4 a {
                    color: aliceblue;
                    text-decoration: none;
                }

                .container_4 a:focus,
                .container_4 a:hover {
                    color: rebeccapurple;
                }

                .container_4 a:nth-child(1) {
                    background-color: darkblue;
                    padding: 15px;
                }

                .container_4 a:nth-child(2) {
                    background-color: coral;
                    padding: 15px;
                }

                .container_4 a:nth-child(3) {
                    background-color: greenyellow;
                    padding: 15px;
                }

                .container_4 a:nth-child(4) {
                    background-color: crimson;
                    padding: 15px;
                }

                .container_4 a:nth-child(5) {
                    background-color: darkgray;
                    padding: 15px;
                }


            

Liste des bases du design avec Flexbox :

Propriété et valeur Effet sur l'élément
display: flex L'élément devient un flex-container et se comporte comme un block.
display: inline-flex L'élément devient un flex-container et se comporte comme un inline-block.
flex-direction: row Distribution horizontale des flex-item, valeur par défaut.
flex-direction: row-reverse Distribution horizontale inversée.
flex-direction: column Distribution verticale.
flex-direction: column-reverse Distribution verticale inversée.
flex-wrap: nowrap Les éléments flex-item ne passe pas à la ligne, valeur par défaut.
flex-wrap: wrap Les éléments passent à la ligne.
flex-wrap: wrap-reverse Les éléments passent à la ligne dans le sens inverse.
justify-content: flex-start Eléments posisionés au début de l'axe principal, valeur par défaut.
justify-content: flex-end Eléments posisionés a la fin de l'axe principal.
justify-content: center Eléments centrer dans l'axe principal.
justify-content: space-between Eléments répartis de façon « justifiée ».
justify-content: space-around Variante de répartition « justifiée ».
align-items: stretch Eléments flex-item étirés dans l'espace disponible, valeur par défaut.
align-items: flex-start Eléments disposés au début de l'axe secondaire.
align-items: flex-end Eléments disposés a la fin de l'axe secondaire.
align-items: center Eléments centrés dans l'axe secondaire.
align-items: baseline Eléments alignés sur la ligne de base du texte (line-height), généralement identique à flex-start si la taille de police est uniforme.
align-content: stretch Les rangées occupent tout l'espace disponible, valeur par défaut.
align-content: flex-start Les rangée s'affichent au début du flex-container.
align-content: flex-end Les rangée s'affichent à la fin du flex-container.
align-content: center Les rangée s'affichent au centre du flex-container.
align-content: space-between L'espace entre les rangées est distribué de façon « justifiée ».
align-content: space-around Variante de space-between
align-self: auto L'élément flex-item adopte l'alignement général défini via align-items, valeur par défaut.
align-self: flex-start L'élément est aligné au début de l'axe secondaire.
align-self: flex-end L'élément est aligné a la fin de l'axe secondaire.
align-self: center L'élément est centré dans l'axe secondaire.
align-self: baseline L'élément est aligné sur la ligne de base du texte (line-height).
align-self: stretch L'élément est étiré pour occuper tout l'espace disponible.
flex-basis: auto La taille de l'élément est définie par son contenu (valeur par défaut).
flex-basis: valeur La hauteur ou la largeur de l'élément correspond à la valeur indiquée.
flex-basis: 0 La taille de l'élément devrait théoriquement être nulle, mais ne peut se réduire en deçà de son contenu minimal insécable.
flex-grow Capacité qu'à un élément de s'étirer dans l'espace restant.
flex-shrink Habilité d'un élément à se contracter si nécessaire.
flex-basis Taille initiale de l'élément avant que l'espace restant ne soit distribué