Cuisine et Web

Recettes pour Cuisiniers ou Web Dev en herbes

Article(s) tagué(s) avec le mot clé :flex.

grid et flex, leurs differences.

Rédigé par G.Cyrille 292 vue(s) Aucun commentaire
Classé dans : Layout, Tutoriels, WebDev Mots clés : flex, grid, layout, display

Ces dernieres années les modèles de boites utilisables se sont enrichis de deux type d'affichages en grilles: flex et grid.Vous en avez déjà probablement fait usage en reprenant des exemples qui fonctionnaient pour vos besoins. Voyons leurs différences et usages dans cet article.

Aux premiers abords et en les testant avec quelques elements, les résultats semblent similaires et peuvent preter à confusion dans leur usages et limites. Pourtant l'un ne fonctionne que sur un axe , portions par portions lorsque l'autre fonctionne sur les deux axes dans un tout, comme le ferait un tableau, ils sont en fait trés différents bien qu'ayant quelques propriétes apparement similaires.L'un etant plus flexible que l'autre posant un cadre.

Lire la suite de grid et flex, leurs differences.

Flex, ajuster le nombre d'élements par lignes. CSS

Rédigé par G.Cyrille 1120 vue(s) Aucun commentaire
Classé dans : Tutoriels, WebDev Mots clés : flex, column, pattern

Le vent en poupe, flex est partout dans nos feuilles de styles et dans les frameworks CSS.

Cette propriété reste parfois mystérieuse et magique pour certains.

Une question revient souvent, comment je fais des lignes avec X colonnes et des marges entre chaque?

Voici un petit tutoriel pour débutant, en guise d'article, nécessitant un minimum de connaissances en Flexbox.

Lire la suite de Flex, ajuster le nombre d'élements par lignes. CSS

Une grille d'hexagones qui s'imbriquent.

Rédigé par G.Cyrille 297 vue(s) 2 commentaires
Classé dans : Tutoriels, WebDev Mots clés : flex, float, shape-outside, SVG

le modéle de boite en flex donne une hauteur de référence aux enfants sans qu'il soit nécessaire de la déclaré dans la feuille de styles pour s'en servir. et c'est plutôt une bonne chose si l'on est dans un cas où cette hauteur varie selon le contenu ou la largeur de l'écran.

Lire la suite de Une grille d'hexagones qui s'imbriquent.

Histoire de colonne au fil du temps (layout)

Rédigé par G.Cyrille 122 vue(s) Aucun commentaire
Classé dans : CSS, Layout, WebDev Mots clés : layout, colonne, grid, flex, float, table

Cette article va vous donner quelques exemples reprenant les vielles méthodes en comparaison sur une structure courante avec

  1. un bandeau,
  2. une colonne de navigation et le contenu à coté
  3. et un pied de page sur toute la largeur.

Nous allons recréer cette structure visuelle en passant par float, grid et l'affichage en mode table.

Lire la suite de Histoire de colonne au fil du temps (layout)