Flexbox

Flexbox est une technique css de mise en page d’un site web. Elle permet ainsi de positionner des blocks (<div>, <section>, <header> …) dans votre page html.

Notions css abordées : display, flex-direction, flex-wrap, justify-content, align-items, order, flex, align-self.

La compréhension par le code

<!-- html -->
<div class="wrap_box">
    <div id="box1" class="box">
        <p>box1</p>
        <p>order: 2 - flex: 7</p>
    </div>
    <div id="box2" class="box">
	<p>box2</p>
	<p>order: 3 - flex: 2</p>
    </div>
    <div id="box3" class="box">
	<p>box3</p>
	<p>align-self: flex-start - order: 1 - flex: 3</p>
    </div>
</div>


<!-- css -->
<style>
.wrap_box {
    display: flex; /* Englober les éléments que l'on veut positionner dans 
                      un affichage "flex" */ 
    flex-direction: row; /* Définition de l'axe primaire : ici en ligne */
    justify-content: center; /* Centrage horizontal sur l'axe primaire */
    align-items: center; /* Définition de l'axe secondaire : ici centrage 
                            vertical */
    height: 600px;
    background: lavender;
}
/*
.wrap_box {
    Dans le cas ou l'on n'utilise pas la propriété flex dans les
    boxes (#box1, #box2, #box3), les boxes prennent la largeur de leurs 
    contenus respectifs. flex-wrap permet de definir si le saut à la
    ligne des boxes est autorisé lorsque l'on rétrécit l'écran.
    flex-wrap: wrap;
}
*/
/*
.box {
    Permet de tout centrer.
    Dans ce cas, justify-content et align-items
    de wrap_box ne sont plus necessaires
    margin: center  
}
*/
#box1 {
    order: 2;
    flex: 7; /* Utilisation de flex, l'ensemble des boxes prennent la 
                largeur totale de l'écran */
    height: 100px;
    background: teal;
}
#box2 {
    order: 3;
    flex: 2; /* Utilisation de flex, l'ensemble des boxes prennent la 
                largeur totale de l'écran */
    height: 100px;
    background: tan;
}
#box3 {
    order: 1;
    flex: 3; /* Utilisation de flex, l'ensemble des boxes prennent la 
                largeur totale de l'écran */
    height: 100px;
    background: coral;
    align-self: flex-start; /* Comportement de l'element box3 sur l'axe 
                               secondaire */ 
}
</style>