"Old" Flexbox and "New" Flexbox. Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years.
Changes both to the spec and what browsers have implemented. How To Tell If you Google around about Flexbox, you will find lots of outdated information. Here's how you can quickly tell: If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox. If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011. If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification.
Examples of Outdated Stuff All this stuff was fantastic at the time it was created, but now is outdated: Support Demo Example of OLD syntax Share On. Working with flexbox. Flexible layouts.
Equal height columns. Presentation independence from your HTML source order. These things haven't been so easy to achieve with CSS—until now. The flexible box layout, the new flexbox specification, makes creating any of these layouts easy, and much more. In this article I'll walk you through the latest flexbox specification and use a simple demo to show you how to create a layout that's flexible, and has equal height columns and elements that you can arrange in any order, regardless of their order in the HTML source. There is some bad news with regard to flexbox and browser support. Opera (12.1) - Supports the latest specification without the need for vendor prefixes.Chrome (23.0) - Supports the latest specification, but requires the -webkit vendor prefix.Safari (5.1) - Supports an older version of the specification with the -webkit vendor prefix.Internet Explorer (10) - Supports an older version of the specification with the -ms vendor prefix.
Figure 1. Figure 2. CSS3 Flexbox Layout module. Positionner correctement des éléments en CSS s'est toujours révélé être une mission aussi palpitante que fastidieuse en raison d'un lourd passé de navigateurs assez peu enclins à suivre des standards communs.
Depuis sa création, CSS propose officiellement quatre types de rendus d'éléments : Le rendu «bloc» Le rendu «inline» Le rendu «tabulaire» Le rendu «positionné» Chacune des valeurs de la propriété display (par exemple inline-block), de float, ou de position, renvoie à l'un de ces quatre types de rendus. CSS3 étend ce périmètre en introduisant un nouveau modèle de boîte «flexible» : flexbox, ou Flexible Box Layout Module. Flexbox est un nouveau mode de positionnement, introduit via la propriété display, permettant de créer un contexte général d'affichage sur un parent et d'en faire hériter ses enfants : Compatibilité de Flexbox module Commençons par calmer les plus optimistes d'entre vous et ceux que je vois déjà en train de se ruer sur leur éditeur HTML préféré.