Grille avec Flexbox

Bonjour,

Je m'intéresse à Flexbox pour concevoir une grille modulaire de mise en page. Cela fonctionne très bien avec des éléments de même hauteur. Je recherche maintenant une solution pour que, dans un conteneur flex, un des éléments flex puissent occuper la totalité de la hauteur de son conteneur (voir le schéma ci-après).

http://img11.hostingpics.net/pics/399393schemaflexbox.jpg

Pour l'instant à part fixer la hauteur du conteneur et celle de l'élément en question je n'ai pas trouvé de solution. Est-ce que vous auriez une piste ?

Merci pour votre aide !

Bonjour,

Sans ajouter de conteneur supplémentaire, cela me semble effectivement très complexe (nécessite des hauteurs explicites, au moins sur le parent).

Flexbox n'est pas optimal pour gérer des affichages bi-directionnels (hauteur et largeur en même temps).

Deux solutions :
- Grid Layout : http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html
- un bon vieux tableau HTML : http://blog.goetter.fr/2015/11/08/ce-bon-vieux-tableau-html/

Désolé...

Bonjour Raphaël,

Merci pour ta réponse et pour les pistes.
Grid Layout pose un vrai problème de compatibilité, ce n'est donc pas une option envisageable dans mon cas. Quant à la solution des tableaux elle est un peu contraignante en terme de code généré (il s'agit d'un modèle pour faciliter l'intégration dans différents CMS/technos). Du coup je préfèrerais si possible éviter.

Avec un conteneur supplémentaire, la méthode que j'ai testé est d'avoir un conteneur flex avec deux éléments en row. Le premier de ces éléments est également un conteneur flex avec les 8 éléments de hauteur réduite en row. Cela fonctionne plutôt bien ainsi, si vous voyez une meilleure solution je suis preneur.

Merci !

Bonsoir,

C'est possible avec flexbox, mais via un système de grilles imbriquées. Mais il faut effectivement ajouter un conteneur supplémentaire...

Voici un exemple : Nested Grid

Et encore ici : Complex Layout
Modifié par Olivier C (24 Nov 2015 - 07:09)