Notes primaires sur première implémentation des flex CSS
Commandes de bases pour positionnement et alignement …
.main {
display:flex;
/*
flex-direction : row;
flex-wrap : wrap;
*/
/* combine flex direction et flex wrap */
flex-flow : row wrap;
/* espacement des éléments */
justify-content : center;
justify-content : space-around;
justify-content : space-between;
height : 600px;
background-color : #EEE;
/* les éléments sont étirés en hauteur */
align-items : stretch ; /* valeur par defaut --> étire en hauteur */
align-items : flex-start ; /* aligne sur la ligne du haut */
align-items : flex-end ; /* aligne sur la ligne du bas */
align-items : center ; /* centre par rapport à la hauteur sans deformation */
/* ne sert que si on a plusieurs lignes */
align-content : space-between;
}
/* Comportement enfant */
.image {
flex-grow : 1;
/* change méthode de calcul des flex-shrink et flex-grow) */
/* flex-basis : 50% */
}
.image:first-child{
order : 2 ; /* Défintion de l'emplacement */
/* indique comment l'élément doit s'agrandir par rapport à l'espace environnement */
/* flex-grow : 2; */
/* proprité inverse */
flex-shrink : 2;
/* Alignement horizontal de l'élément */
align-self : flex-end;
}
.image:nth-child(2){
order : 1 ; /* Défintion de l'emplacement */
}
/* ******************************** */
/* **Menu ** */
/* ******************************** */
.menu {
height : 80px;
background-color : #eed;
display: flex;
align-items: center ;/* aligner par rapport au centre */
align-content : center;
justify-content : end ; /* Espacement entre les éléments */
flex-wrap : wrap; /* va à la ligne lorsque les éléments ne peuvent plus rentrer */
}
.menu a {
padding : 0 5px;
}
@media (max-width: 500px) {
.menu {
flex-direction : column;
height : 180px;
}
}
CSS : flex