FlexBox par la pratique !

 

 

Il fait parti des outils que nous utilisons le plus pour nos mises en page.

Pourtant, quand nous le rencontrons, il nous fait un peu peur ...

 

Projet fini sur CodePen ICI

 

Pour le dompter, le mieux reste de jouer avec !

 

Du footer qu'on fixe en bas de page, à la mise en place de la responsivité, mettons les talents de flexbox au service de notre projet.

Pour plus de facilité, j'ai découpé tout ça en 3 vidéos dans lesquelles je prends le temps d'expliquer ce que je fais... et pourquoi !
Après ça, ce sera à toi de jouer !

Vidéo 1 

Mise en place du corps du site et footer bloqué en bas de la page

 

Vidéo 2

un container responsive pour nos cartes

 

Vidéo 3

nos cartes responsives qui changent de direction en fonction de la taille de l'écran

 

En réumé, nous avons vu :

 

Comment bloquer le footer en bas de page en demandant au "contenu" de prendre un maximum de la place disponible:

main {
  flex-grow: 1;
}

 

Nous avons fait en sorte que les cartes ne s'écrasent pas à la réduction de la largeur de la page :

main {
  flex-shrink:0;
}

 

Pour finalement demander à l'élement parent de faire passer ses enfants les uns sous les autres si nécessaire :

section {
  display: flex;
  flex-wrap: wrap;
}

 

Une adaptation des cartes d'une configuration horizontale sur pc, à verticale sur smartphone :

@media screen and (max-width: 440px) {
  .card {
    flex-direction: column;
  }
}

 

Flexbox n'est qu'une une manière de faire !

Grid en est une autre par exemple.

Pas meilleure, pas inférieure...

Il  n'y a pas de code absolue ! Comme en cuisisne, chacun sa sauce !

 

3 objectifs :

• prenez du plaisir en comprenant ce que vous faites
• c'est mieux si ça fonctionne !
• ça doit être maintenanble et compréhensible par un autre dev !

 

A bientôt Compagnon de Code