Utiliser Grid ou Flexbox ? Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout. Par Rachel Andrew Dans ma récente présentation à Fluent Conf, j’ai montré les caractéristiques communes et les différences existant entre Flexbox et CSS Grid Layout. Layout principal vs éléments d’interface utilisateur Quand on découvre CSS Grid Layout, on pense en général qu’il permet de contrôler les grandes division d’une mise en page et fournit un cadre pour les headers, sidebars, contenu principal et footers. Vous pouvez en voir un cas d’usage dans cet exemple. Flexbox n’est pas aussi bien adapté à la création de tels layouts. Nous voyons ici la principale différence entre Flexbox et Grid. Uni-dimensionnel vs bi-dimensionnel Voici l’exemple le plus simple possible de layouts à une et deux dimensions (cliquez sur “Edit on CodePen” pour une version pleine largeur) Flexbox fonctionne comme ça. Intéressé par CSS ?
Don't use flexbox for overall page layout - JakeArchibald.com When I was building this blog I tried to use flexbox for the overall page layout because I wanted to look cool and modern in front of my peers. However, like all of my other attempts to look cool and modern, it didn't really work. Why? Update: Don't let this post scare you off flexbox, it's one of the best layout systems we have on the web today. Flexbox vs Grid Here's a basic three column design: Here it is mocked up using flexbox (works in all modern browsers), and here it is using grid layout (works in IE10+). Browsers can progressively render content as it's streamed from the server, this is great because it means users can start consuming content before it's all arrived. It's difficult to spot too, you're unlikely to notice it while developing locally, or via a super-fast connection. Flexbox: content dictates layout Here's a simplified version of the layout: As the page loads, the container starts to receive the first child, the main content. But grid can load poorly too...
Flexbox Grid