Tutoriels Flexbox
- Tutoriels sur Flexbox par la-cascade.io (en français)
- flexbox sheet – guide illustré des propriétés par le Magazine du Webdesign
- A Visual Guide to CSS3 Flexbox Properties
- Solved by Flexbox – Cleaner, hack-free CSS
- Designing A Product Page Layout with Flexbox
Layout, mise en page
Mélanger largeurs fluides et fixes avec flex-grow
The “Holy Grail” 3 column liquid layout with pixel-widths.
|
1 2 3 4 |
<main> <section>rest</section> <aside>150px</aside> </main> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
section { flex-grow: 1; } aside { flex-basis: 150px; flex-shrink: 0; /* flex-shrink: 0; prevents the aside from shrinking, if the section attempts to grow due to its content. (see third example) */ /* Instead of flex-basis: 150px; and flex-shrink: 0; you can use the shorthand: */ /* flex: 0 0 150px; */ } |
Différentes astuces sur la manière de cibler les sélecteurs
Outils Flexbox
- Flexplorer est un outil en ligne qui permet de jouer en live avec les valeurs du modèle Flexbox
Utiliser Flexbox avec des navIEgateurs de merde
Normalizing Cross-browser Flexbox Bugs
Source: Normalizing Cross-browser Flexbox Bugs.
flex-grow et flex-shrink craquent leurs slips sous IE10+
Il faut donner une largeur fixe (en %, ça ira très bien…) à l’élément sur lequel on a assigné la propriété flex-grow ou flex-shrink.
Ressources en ligne:
- Normalizing Cross-browser Flexbox Bugs by Philip Walton
- Flexbugs – A community-curated list of flexbox issues and cross-browser workarounds for them.
- Almost complete guide to flexbox (without flexbox)
