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%;}}