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.
CSS3 Flexbox Layout module - Alsacreations
Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects.
Faites votre mise en page avec Flexbox - Apprenez à créer votre site web avec HTML5 et CSS3
Reprenons. Les éléments sont organisés soit horizontalement (par défaut), soit verticalement. Cela définit ce qu'on appelle l'axe principal. Il y a aussi un axe secondaire (cross axis) :
La cascade.io : CSS Flexbox et l'alignement
Par Rachel Andrew PETIT RÉSUMÉ : dans cet article, nous examinons les propriétés d'alignement de Flexbox tout en découvrant quelques règles de base qui nous aideront à nous rappeler comment elles fonctionnent sur les axes principal et transversal. Dans le premier article de cette série, j'ai expliqué ce qui se passait lorsqu'on déclare display: flex sur un élément. Ici, nous allons examiner les propriétés d'alignement et la façon dont elles fonctionnent dans Flexbox.
Eléments ''blocs'' et éléments ''en-ligne''
3 modes d'affichage pour les éléments HTML Par défaut, les éléments HTML sont affichés selon l'un des modes suivants : 1- Bloc / block Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés (par défaut) l'un sous l'autre. Exemple typique d'élément bloc : l'élément <p> (le paragraphe).
Les concepts de base pour flexbox - CSS : Feuilles de style en cascade
Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles. Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes. Les deux axes des boîtes flexibles Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais).
MDN : Aligner des éléments dans un conteneur flexible
Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles. Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement.
Présentation du cours complet HTML et CSS
Objectifs du cours HTML et CSS et prérequis Bienvenue à tous dans ce cours complet traitant des deux langages informatiques incontournables : le HTML et CSS. Le but de ce tutoriel est d’explorer les différentes fonctionnalités du HTML et du CSS et de vous apprendre à les utiliser pas à pas. Ce cours s’adresse à tous, des plus parfaits débutants aux personnes disposant déjà d’un bagage informatique. Le HTML et le CSS sont des langages de base en informatique ; on commence donc généralement par leur apprentissage car ils sont assez simples à comprendre et car ils sont indispensables.
MDN : Flexbox
Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux. Pourquoi Flexbox ? Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement.
Compétences
Agence web depuis 2005 Notre société est née sur une idée simple. Nous pouvons faire de beaux sites tout en respectant les normes. C’est la combinaison de l’ « ART » et du « WAI » (Web Accessibility Initiative). La prononciation [artwaj] n’est pas sans rappeler Hawaii pour rester dans le domaine du surf. Particularité technique
Contrôler les proportions des boîtes flexibles le long de l'axe principal - CSS : Feuilles de style en cascade
Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : flex-grow, flex-shrink et flex-basis. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles. Un premier aperçu Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments : flex-grow : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ? flex-shrink : quelle proportion de l'espace peut être retirée à cet élément ?
OpenTest. Créer des tutoriels vidéo le plus simplement du monde – Les Outils Tice
OpenTest est un outil formidable pour enregistrer en son et en vidéo ce que se passe dans votre navigateur web. Il s’agit d’une extension pour Chrome qui facilite la création et le partage de vidéos. Encore un excellent outil pour la classe inversée. « Vous vous demanderez bientôt comment vous avez pu survivre sans lui » clame le site d’Opentest. Sans doute un peu exagéré mais c’est vrai qu’un simple test suffit à se convaincre de l’intérêt de l’outil. Une fois installé sur votre navigateur Chrome, OpenTest affiche une icône sur la barre des menus de votre navigateur.
Le contexte de formatage block en CSS - Alsacreations
Certaines spécifications CSS sont plus obscures que d'autres. Mais il est du devoir d'un intégrateur de les connaître pour être plus efficace dans son métier. Qui n'a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ?
