Mise en page en CSS : display:table Vs flexbox Vs grid layout ?

Salut,

Je découvre plusieurs moyens de faire une mise en page en CSS, autrefois je crois qu'on utilisait des tables mais maintenant si j'ai bien compris c'est "mal vu" mais j'ai l'impression que ce qu'on a eu par la suite (display:table, flexbox, grid layout...) sont plus ou moins des équivalents CSS de la table en html...

Lequel vous préférerez ? Pour quelles raisons ?

Merci.

Pour flexbox : https://www.w3.org/TR/css-flexbox-1
Pour grid layout : https://www.w3.org/TR/2012/WD-css3-grid-layout-20120322
Pour table (CSS) : https://www.w3.org/TR/CSS2/tables.html

Bonjour,

Regarde aussi la compatibilité de chacun.

Sinon, Flexbox a plutôt la cote et offre de grandes possibilités.

je penche plus pour table
fait la recherche sur float:both; cad sur les flottant tu verras il est plus difficille de manipuler les flottants quand on a des tableaux a coté

Merci pour vos avis. Je continue de regarder ça...

Bonjour,

1/ display:table est le plus "ancien" (et le plus compatible cross-browser)

Citation:

---

L'élément se comporte comme un élément <table>. Il définit une boîte de bloc.

---

2/ display:flex est le plus "en vogue", et surtout très "flexible" !

Citation:

---

L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle de boîte flexible.

---

• MDN - Utilisation des flexbox en CSS
• A Complete Guide to Flexbox

3/ display:grid est le plus "récent" (et le moins compatible cross-browser, pour l'instant)

Citation:

---

Cet élément se comporte comme un élément de bloc et dispose son contenu selon le modèle de grille.

---

• MDN - Grilles CSS (CSS Grid)

4/ Compatibilités des navigateurs : à voir ici.

Merci. Oui Flexbox semble apprécié d'ailleurs j'ai trouvé quelques outils pour tester :

- http://the-echoplex.net/flexyboxes ou https://demo.agektmr.com/flexbox
- http://bennettfeely.com/flexplorer
- http://codepen.io/enxaneta/full/adLPwv

Sans conteste,nous avons probablement engagé nos lecteurs vers une mauvaise vision des choses, en voulant comparer du html au CSS,
Dans l'ordre je serait de toute façon
1) pour convertir tout mes 50 sites (que j'ai réalisé gratuitement pour des association loi 1901) en HTML5 donc et y compris les nouvelles balises si puissantes pour les mises en pages évolutives (responsivité )
2) pour selon les cas utiliser les nouveaux moyens CSS dont certains remplacent effectivement des balises html.

Je suis d'accord pour admettre que Flexbox CSS3 et Grid Layout bien que 100% CSS nous poussent dans la suppression de balises HTML donc ils dépassent le CSS.

Pour répondre à ta question, je pense que très vite les display none/block vont disparaître, par exemple, et donc ma réponse est (puisque cela fait 3 ans que j'ai attaqué ces changements), nous feront très vite des sites HTML5 contenant la ou c'est nécessaire des Flex ou Grid ! ce sont nos matériaux qui viennent d'augmenter, pas notre technique qui est devant un choix radical.

hello,

pour ma part je preconise le css-grid. certes c'est une techno jeune mais...

- tu peux "imiter" le framework de boostrap (si tu veux garder quelque chose que tu connais deja)
- ca repond a tous les type de mise en pages que l'on veut (il y a enormement d'options)
- les normes (entre les navigateurs) sont rigoureuses et respectees (donc comportement identique)
- s'il y a des problemes de blocs, ca ne casse pas toute la page.

pour moi, le css-grid repond a la problematique du "layout" de ta page, et de part sa richesse d'options, ca deviendra le standars des mises en pages

Bonjour,

Citation:

---

Envoyé par JPongivart

...en voulant comparer du html au CSS...

---

Jean-Pierre,
tu dois confondre <table> (structure HTML) avec display:table; (CSS).
Ici, on parle de display:table;.

Citation:

---

Envoyé par Doksuri

...je preconise le css-grid...

---

Je dirais :

• OUI, pour les web-designers professionnels, et tous ceux qui veulent faire des mises en pages complexes.
• PAS FORCEMENT, pour les autres (développeurs occasionnels,...), et les mises en page "classiques", relativement simples à mettre en place où display:table; ou display:flex; peuvent être utilisés.

Car il n'est pas nécessaire d'utiliser un canon pour écraser une mouche.

Citation:

---

Envoyé par jreaux62

Bonjour,
Jean-Pierre,
tu dois confondre <table> (structure HTML) avec display:table; (CSS).
Ici, on parle de display:table;.

---

Ah oui tu as raison... la honte :oops::oops::oops: