#flexbox

New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn

▻https://seenthis.net/messages/658961 via nicod_

Does CSS Grid Replace Flexbox? | CSS-Tricks
▻https://css-tricks.com/css-grid-replace-flexbox
https://cdn.css-tricks.com/wp-content/uploads/2017/03/both-grid-and-flex.png

No. Well. Mostly No.

#Grid is much newer than #Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

To put a point on it:

Grid can do things Flexbox can’t do.
Flexbox can do things Grid can’t do.
They can work together: a grid item can be a flexbox container. A flex item can be a grid container.

#web_design

▻https://seenthis.net/messages/617063 via baroug

CSS Grid Layout arrive, préparez-vous ! – La Tête dans le Flux
▻https://blog.goetter.fr/2016/11/30/css-grid-layout-arrive-preparez-vous/comment-page-1/#comment-616

En résumé :
Grid Layout est un module de positionnement parfait pour construire ses templates et ses grilles, bref l’architecture globale de la page
Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits : navigations, sliders, fiches produits, etc.

L’idée serait de pouvoir se passer de bootstrap pour gérer les grilles dans les pages HTML...

Voir aussi :
– comparatif de toutes les possibilités pour des grilles en CSS : float, inline-block, table-cell, columns, flexbox, grid ▻https://blog.goetter.fr/2014/10/27/le-point-sur-les-grilles-en-css

Grid layout :
– le positionnement par grid layout : ▻http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html
– le site de référence pour grid layout, page des exemples : ▻http://gridbyexample.com/examples
– des exemples avancés d’utilisation de grid layout : ▻https://blog.goetter.fr/2016/01/02/grid-layout-vers-la-grille-parfaite

Flexbox :
– revue exhaustive des caractéristiques de flex : ▻https://chriswrightdesign.com/experiments/flexbox-adventures
– exploration des possibilités de CSS flexbox (flex, flex-item, order...) : ▻http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
– un générateur de code pour les propriétés flex : ▻http://the-echoplex.net/flexyboxes
– des exemples de grilles en flex : ▻https://philipwalton.github.io/solved-by-flexbox

Et pour la norme :
– Flexible box : ▻https://www.w3.org/TR/css-flexbox-1
– Grid layout : ▻https://www.w3.org/TR/css-grid-1

#css, #flex, #flexbox, #grid, #grid_layout, #grille #bootstrap

▻https://seenthis.net/messages/565070 via cy_altern

Flexbox Patterns
▻http://www.flexboxpatterns.com

Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.

#flexbox_Web_CSS_exemple_clevermarks

▻http://seenthis.net/messages/462556 via Nicolas Hoizey

A Visual Guide to CSS3 #flexbox Properties | Scotch
▻https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

https://cask.scotch.io/2015/04/CSS3-Flexbox-Model.jpg

#css

▻http://seenthis.net/messages/362746 via b_b