IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

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


Sujet :

Grille CSS (CSS Grid)

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut 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

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Regarde aussi la compatibilité de chacun.

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

  3. #3
    Membre averti
    Homme Profil pro
    etudiants en programation
    Inscrit en
    Janvier 2017
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : Cameroun

    Informations professionnelles :
    Activité : etudiants en programation

    Informations forums :
    Inscription : Janvier 2017
    Messages : 22
    Par défaut idée
    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é

  4. #4
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Merci pour vos avis. Je continue de regarder ça...

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,

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

    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" !

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



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

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


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

  6. #6
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    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

Discussions similaires

  1. Mise en page DIV CSS
    Par Rifton007 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 02/05/2009, 13h37
  2. Probleme de mise en page avec css
    Par fabrice88 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 31/10/2008, 11h25
  3. Mise en page avec css
    Par jlb59 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 27/01/2008, 11h57
  4. Mise en page rapide CSS
    Par Macabre dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 16/09/2007, 10h25
  5. Mise en page en css au lieu des tableaux
    Par 12monkeys dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 09/01/2007, 16h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo