Astuces CSS - Boîtes de même hauteur avec flex

En css pur, ajouter ces lignes au fichier style.css

Code Css

#uptab .wrapper {
   display: flex;
}

#UpTab0, #UpTab1, #UpTab2, #UpTab3, #UpTab4 {
   flex-grow: 1;
}
 
Sur ce site avec la skin Chronica, voilà le code, avec en sus un alignement en colonne dans les media queries pour les petits écrans :
 
div#DownTab .wrapper, div#toprow1 .wrapper {  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 *
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  align-items: stretch;
 }
@media all and (max-width: 600px) {
div#DownTab .wrapper, div#toprow1 .wrapper {flex-direction: column;} #toprow1,#DownTab {max-width:100%;}}

Index |Info | Permalien | PDF

Technique

adHoc

Fabriquer le web

Sécuriser

Référencer

Astuces CSS

Piwigo

TNG

Revue de presse RGPD