How Flexbox works — explained with big, colorful, animated gifs. Css3 - firefox overflow-y not working with nested flexbox. Guide de Flexbox : n'oubliez pas flex-shrink. Un article sympa de Noah Blon sur l'un des aspects les plus sacrément pénibles de flexbox. Un bon complément de l'excellent article sur les mises en page sur 12 colonnes. Par Noah Blon NdT : En complément de l'article de Landon Schropp sur les mises en page sur 12 colonnes, l'article de Noah Blon fait un focus sur une propriété de flexbox un peu compliquée de prime abord, flex-shrink. En apprenant à utiliser flexbox, j’ai été captivé par la façon dont les items pouvaient s’adapter à leur container, en particulier par la façon dont ils pouvaient s’agrandir — mais je me suis rendu compte récemment qu’il était tout aussi important de comprendre comment ils pouvaient rétrécir.
Vous allez comprendre tout de suite. Un cas d’usage typique de flexbox : on a un ensemble d’items qu’on veut répartir de manière régulière dans une rangée. Nous créons un contexte flex à l’intérieur d’un container via display: flex;. Argh ! Voici un exemple un peu plus compliqué. Il y a deux raisons à cela. Flexbox, guide complet. Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici.
Par Chris Coyier NdT : Ce tutoriel est la réunion de quatre articles de Chris Coyier formant une introduction à Flexbox. Vous pouvez ensuite consulter tous les articles sur Flexbox traduits dans la Cascade notamment les exemples concrets d'implémentation et les astuces techniques. Le module CSS3 Flexbox Layout fournit une façon efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques - d'où le terme "flex". CSS Flexible Box Layout Module Level 1. Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119] Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this: Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this: Note, this is an informative note.
The specification will remain Candidate Recommendation for at least six months. Solved by Flexbox — Cleaner, hack-free CSS. All of the code samples on this site show how to solve a particular design problem with Flexbox.
They show just the code that's needed to make the demos work in a spec-compliant browser. Some browsers do not fully comply with the latest version of the spec, so sadly, a few workarounds were necessary. Workarounds for non-compliant browsers are not shown in the code samples, but if you're curious about those implementation details, you can check out the source files.
Each demo links to its source, and all browser-specific workarounds are well-documented, so don't be afraid to take a look. The vendor prefixing and translating of current flex properties to their legacy equivalents is all handled by autoprefixer. The class naming convention used in the code samples and source files is taken from SUIT CSS, which is based on BEM methodologies. If you find a mistake or would like to suggest an additional example, feel free to open an issue or submit a pull request on Github. Flexy Boxes — CSS flexbox playground and code generation tool. Flexbox browser support Three versions of the flexbox spec – each with different syntax – have been implemented in browsers.
The two 2012 specs are roughly equivilant in terms of features, differing mainly in syntax. The earlier 2009 spec is less comprehensive though covers a lot of the same ground. Flexbox 2012 — W3C Candidate Recommendation, September 2012 Opera 12.1+, Firefox 22+. Chrome 21 -webkit- Flexbox early 2012 — W3C Working Draft, 22 March 2012 Internet Explorer 10 -ms- Flexbox 2009 — W3C Working Draft, 23 July 2009 Firefox 2+ -moz-, Chrome 4+ -webkit-, Safari 3.1+ -webkit-. iOS Safari 3.2+ -webkit- More browser support info available on caniuse.com. Known issues.