Application pratique de FlexBox. Flexbox: un nouveau principe de mise en page CSS. Découvrez la flexbox et comment l'appliquer.

Comment travailler facilement avec Flexbox comme exemple de mise en page d'un modèle de site d'actualités.

Croyez-moi, vous n'avez pas besoin d'une analyse détaillée de tous les aspects de l'utilisation de Flexbox si vous souhaitez commencer à l'utiliser maintenant. Dans ce guide, l'auteur va vous présenter certaines des fonctionnalités de Flexbox et créer une «mise en page des nouvelles» comme celle que vous pourriez voir sur The Guardian.

La raison pour laquelle l'auteur utilise Flexbox est le grand nombre de fonctionnalités qu'il propose:
- facilité de création de colonnes adaptatives;
- créer des colonnes de la même hauteur;
- la possibilité de presser le contenu au fond du récipient.

Allons-y!

1. Commencez par créer deux colonnes

La création de colonnes à l'aide de CSS a toujours entraîné certaines difficultés. Pendant longtemps, les flotteurs et / ou les tables ont été largement utilisés (et sont utilisés) pour effectuer cette tâche, mais chacune de ces méthodes avait (et a) ses inconvénients.

À son tour, Flexbox simplifie ce processus, présentant un certain nombre d'avantages tels que:

Écrire du code plus propre: il suffit de créer un conteneur avec une règle affichage: flex;
- flexibilité: nous pouvons redimensionner, étirer et aligner les colonnes en changeant quelques lignes CSS;
- balisage sémantique;
- De plus, l'utilisation de Flexbox élimine la nécessité d'annuler le flux pour éviter un comportement imprévisible de la mise en page.

Commençons par créer deux colonnes, dont l'une occupera 2/3 de la largeur de notre conteneur, et une autre - 1/3 de sa partie.

Il y a deux éléments ici:

Récipient colonnes;
- deux enfants colonnedont l'un a une classe supplémentaire colonne principaleque nous utilisons plus tard afin d'élargir la colonne.

Colonnes (affichage: flex;) .column (flex: 1;) .main-column (flex: 2;)
Parce que le colonne principale a une valeur flexible de 2 , cette colonne occupera deux fois plus d'espace que la seconde.

Ajoutez un peu de design visuel et, par conséquent, nous obtenons:

Cliquez pour voir en action

2. Faites de chaque colonne un conteneur flexbox

Chacune des deux colonnes contiendra plusieurs articles disposés verticalement, nous devons donc également fabriquer des conteneurs flexbox à partir de ces deux éléments.

Nous avons donc besoin des articles:

Ils étaient disposés verticalement à l'intérieur de la colonne du conteneur;
- occupé tout l'espace disponible.

La règle flex-direction: colonnespécifié pour le conteneur, ainsi que la règle flex: 1spécifié pour l'élément enfant permet à l'article de remplir tout l'espace libre verticalement, tandis que la hauteur des deux premières colonnes restera inchangée.

Cliquez pour voir en action

3. Nous fabriquons le contenant à partir de l'article

Maintenant, pour étendre nos capacités, présentons chaque article comme un conteneur flexbox. Chacun de ces conteneurs contiendra:

Gros titre
- paragraphe;
- un panneau d'information avec le nom de l'auteur et le nombre de commentaires;
- une sorte d'image adaptative.

Ici, nous utilisons Flexbox pour «pousser» le panneau d'informations vers le bas de l'élément. Maintenant, regardez quel résultat nous attendons.

Et voici le code lui-même:

.article (display: flex; flex-direction: column; flex-based: auto; / * Définit la taille initiale d'un élément en fonction de son contenu * /) .article-body (display: flex; flex: 1; flex-direction: colonne;). contenu-article (flex: 1; / * Le contenu remplit tout l'espace restant, appuyant ainsi le panneau d'information vers le bas * /)
Les éléments d'un article sont organisés verticalement à l'aide d'une règle. flex-direction: colonne.

Nous avons également appliqué la propriété flex: 1 à l'élément contenu de l'article, l'étirant ainsi à tout l'espace libre et appuyant sur article-info vers le bas. La hauteur des colonnes dans ce cas n'a pas d'importance.

Cliquez pour voir en action

4. Ajoutez des colonnes imbriquées

En fait, nous avons besoin de la colonne de gauche pour inclure quelques colonnes supplémentaires. Par conséquent, nous devons remplacer le deuxième élément responsable de l'article par un conteneur colonnesque nous avons utilisé plus tôt.

Puisque nous voulons que la première colonne imbriquée soit plus large, ajoutez une classe à l'élément colonne imbriquée, et en CSS, nous indiquerons:

Colonne imbriquée (flex: 2;)
Maintenant, cette colonne sera deux fois plus large que la seconde.

Cliquez pour voir en action

5. Nous réalisons le premier article avec une disposition horizontale

Le premier article est vraiment gros. Afin d'utiliser efficacement l'espace sur l'écran du moniteur, changeons son orientation en horizontale.

Premier article (flex-direction: row;) .premier article .article-body (flex: 1;) .premier article .article-image (hauteur: 300px; commande: 2; padding-top: 0; largeur: 400px;)
Propriété ordre Dans ce cas, il joue un grand rôle, car il vous permet de changer l'ordre des éléments HTML sans changer le balisage HTML. En réalité, article-image dans le code précède l'élément article-corpsmais se comporte comme s'il se tenait derrière lui.

Cliquez pour voir en action

6. Faire une mise en page adaptative

Maintenant, tout ressemble à ce que nous voulions, bien qu'un peu aplati. Corrigeons cela en ajoutant de la flexibilité à notre mise en page.

L'un des avantages de Flexbox est que la simple suppression de la règle affichage: flex dans le conteneur afin de le déconnecter complètement (Flexbox), tandis que le reste de ses propriétés (telles que align-items ou fléchir) resteront des travailleurs.

Par conséquent, nous pouvons activer la mise en page adaptative en utilisant Flexbox uniquement lorsque cela est nécessaire.

Nous allons donc supprimer affichage: flex des sélecteurs .Colonnes et .colonneau lieu de les "empaqueter" dans une requête média:

Écran @media et (min-width: 800px) (.columns, .column (display: flex;))
C'est tout! Sur les petits écrans de résolution, tous les articles seront empilés les uns sur les autres et sur des écrans d'une résolution supérieure à 800 pixels, sur deux colonnes.

7. Ajoutez la touche finale

Afin de rendre la mise en page plus attrayante sur les grands écrans, ajoutons quelques ajustements CSS:

@media screen et (min-width: 1000px) (.first-article (flex-direction: row;) .first-article .article-body (flex: 1;) .first-article .article-image (height: 300px ; ordre: 2; padding-top: 0; largeur: 400px;) .main-column (flex: 3;) .nested-column (flex: 2;))
Le contenu du premier article est aligné horizontalement: le texte est à gauche et l'image à droite. De plus, la colonne principale est maintenant devenue plus large (75%). Il en va de même pour la colonne imbriquée (66%).

Et voici le résultat final!

Cliquez pour voir en action

Conclusion

Maintenant, vous voyez vous-même que vous pouvez utiliser Flexbox dans vos projets sans même plonger dans toutes ses subtilités, et la disposition créée en est un exemple clair. Au moins, l'auteur espère vraiment cela.

Flexbox est un tout nouvel ensemble de propriétés CSS qui permet aux concepteurs de mise en page de créer des mises en page flexibles pour les sites. Il est idéal pour les mises en page dites réactives, car il réduit considérablement la complexité de la mise en page. Les navigateurs modernes (y compris les navigateurs mobiles IE10 +, iOS et Andrioid) prennent déjà en charge Flexbox, donc si vous n'avez pas entendu parler de Flexbox, il est temps d'explorer.

Flexbox prêt à l'emploi

Le Web a été conçu à l'origine comme un mécanisme d'échange de documents scientifiques. Depuis lors, la technologie a fait un grand pas en avant, mais nous utilisons toujours le CSS, dont les racines sont ces publications numériques.

En effet, la mise en page CSS et le positionnement des éléments sur la page sont parmi les concepts les plus difficiles pour les concepteurs de mise en page, quelle que soit leur expérience. Pour la mise en page, ils utilisent des propriétés telles que float, clear, display: block, display: inline pour mettre en page les mises en page de leurs sites. Mais maintenant, avec la nouvelle propriété CSS display: flexbox, vous pouvez spécifier la direction, l'emplacement et l'espacement entre les éléments de la page.

Affichage: -webkit-box; / * ANCIEN - iOS 6-, Safari 3.1-6 * / affichage: -moz-box; / * OLD - Firefox 19- (buggy mais fonctionne principalement) * / display: -ms-flexbox; / * TWEENER - IE 10 * / display: -webkit-flex; / * NOUVEAU - Chrome * / affichage: flex; / * NOUVEAU, Spec - Opera 12.1, Firefox 20+ * /

Flexbox est une solution élégante à un long problème de mise en page déroutant. Au cours des dernières années, les codeurs ont attendu que les navigateurs prennent en charge le nouvel affichage: propriété flexbox, et enfin c'est arrivé - les dernières versions de tous les principaux navigateurs le prennent en charge. Vous trouverez plus d'informations sur le support.

Utilisation de Flexbox et de ses propriétés

La combinaison de requêtes multimédias Flexbox et CSS est un outil puissant. Dans l'exemple ci-dessous, j'ai fait une version simplifiée de la page principale du site Web Treehouse en utilisant l'approche moderne mobile-first et flexbox. Ouvrez cet exemple et redimensionnez la fenêtre du navigateur.

À première vue, il peut sembler que l'exemple n'a rien de spécial, mais si vous regardez le code, vous pouvez voir que la mise en page a été effectuée sans utiliser la propriété float: left ou float: right. Les propriétés display: block ou display: inline ne sont pas non plus utilisées.

Propriété DISPLAY: FLEX

affichage: flex | inline-flex

La propriété display: flex est appliquée au conteneur parent, qui devient " récipient flexible"(flex-container), ainsi que tous ses descendants directs sont des" éléments flexibles "(flex elements). Un conteneur flexible a axe principal, qui définit la direction principale de ses descendants directs (éléments flexibles). Axe transversal perpendiculaire à l'axe principal. Ces deux axes ont un ensemble de propriétés avec lesquelles vous pouvez contrôler l'emplacement des éléments flexibles les uns par rapport aux autres dans le conteneur.

Vous pouvez également créer des conteneurs flex imbriqués, comme je l'ai fait dans l'exemple ci-dessus, car la propriété display: flex n'est pas héritée. Les blocs de classes .header et.nav reçoivent la propriété display: flex. Ceci est similaire à l'implémentation de lignes et de colonnes dans le framework CSS Foundation.

Remarques:

• Colonnes CSS colonnes ne fonctionne pas avec un conteneur flexible.
• float, clear et vertical-align ne fonctionnent pas avec les éléments flexibles

Propriété FLEX-DIRECTION

flex-direction: ligne | ligne inverse | colonne | inverser la colonne

• rangée (par défaut): de gauche à droite pour ltr, de droite à gauche pour rtl;
• rangée arrière: de droite à gauche pour ltr, de gauche à droite pour rtl;
• colonne: similaire à la ligne, de haut en bas;
• inverser la colonne: similaire à la ligne inverse, de bas en haut.

La propriété flex-direction définit la direction de l'axe principal. L'axe principal détermine la direction et pas nécessairement l'horizontale, par exemple, lorsqu'ils sont affichés sur les navigateurs mobiles, tous les éléments du conteneur (élément flexible) sont regroupés dans une colonne l'un après l'autre. Ceci est spécifié en utilisant flex-direction: column. Pour que les éléments du conteneur soient situés dans le sens horizontal, définissez simplement flex-direction: row.

Parce que la valeur par défaut de la propriété flex-direction: row est donc, même si vous ne la déclarez pas, les éléments du conteneur flex seront horizontaux.

Propriété FLEX

flex: aucun | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

Valeur par défaut: flex: 0 1 auto.

Propriété fléchir appliqué aux éléments flexibles du conteneur. Il s'agit d'une courte entrée avec laquelle vous pouvez définir plusieurs propriétés distinctes à la fois: flex-grow, flex-shrink et flex-based.

Les propriétés flex-grow et flex-shrink déterminent l'espace que chaque élément du conteneur flex occupera les uns par rapport aux autres. Par défaut, flex-grow: 0 et flex-shrink: 1. Cela signifie que tous les éléments seront proportionnels les uns aux autres.

La propriété flex-based détermine les tailles des éléments pour remplir tout l'espace du conteneur flex. La valeur de cette propriété est auto.

Les 2 dernières propriétés de flex-shrink et flex-base sont facultatives. Dans l'exemple ci-dessus, j'ai défini la valeur flex: 1 pour le bloc avec la classe .nav, qui est la même si vous y écrivez flex-grow: 1. Un autre élément flex dans le container.header est l'élément h1 avec class.logo, qui est défini sur flex-grow: 0, de sorte que l'élément .nav prendra toujours plus d'espace que l'élément.logo.

Propriété JUSTIFY-CONTENT

justifier-contenu: flex-start | flex-end | centre | espace entre | autour de l'espace

L'une de mes propriétés préférées, la propriété justification du contenu détermine l'alignement par rapport à l'axe principal, aidant à répartir l'espace libre restant à l'intérieur du conteneur flexible, par exemple, lorsque ses éléments ne sont plus «étirés» ou étirés, mais ont déjà atteint leur taille maximale. Il permet également d'une certaine manière de contrôler l'alignement des éléments en dépassant les limites de la ligne.

• flex-start (par défaut): les éléments sont décalés au début de la ligne;
• extrémité flexible: les éléments sont décalés à la fin de la ligne;
• centre: les éléments sont alignés au centre de la ligne;
• l'espace entre: les éléments sont répartis uniformément (le premier élément au début de la ligne, le dernier à la fin);
• autour de l'espace: Les éléments sont répartis uniformément avec une distance égale entre eux et les limites de ligne.

Illustration du fonctionnement de la propriété justyfy-content:

Dans mon exemple, le bloc avec la classe .header, j'ai enregistré la valeur justification-contenu: espace-entre. Cela signifie que le premier élément du conteneur flexible sera situé au début du début principal (voir l'image dans le chapitre AFFICHAGE: Propriété FLEX), et le dernier élément sera situé à la fin de l'extrémité principale. Tous les éléments de conteneur flexibles situés entre le premier et le dernier seront distribués uniformément.

Pour un élément avec la classe .nav, j'ai utilisé la propriété justification-contenu: espace-autour pour distribuer tout l'espace uniformément avec une indentation autour de chaque élément du conteneur flex.

En garde à vue

Je n'ai répertorié que certaines propriétés du module flexbox. Il s'agit d'une technologie de mise en page relativement nouvelle et, au fur et à mesure de son introduction dans les projets, je compléterai l'article par de nouvelles propriétés utiles qui simplifieront considérablement la création de mises en page réactives de haute qualité pour les sites Web.

Flexbox est une technologie de mise en page pratique qui peut devenir un outil indispensable pour créer des modèles HTML.

Lors de la création de projets, toute typographe a une stratégie de mise en page spécifique. Beaucoup de gens écrivent du HTML pur ou utilisent des frameworks populaires. Si le concepteur de la mise en page se sent à l'aise lorsqu'il travaille avec des technologies familières et réussit, c'est l'indicateur d'un bon spécialiste. Mais Flexbox peut devenir un outil auxiliaire ou de base indispensable pour organiser un code compétent.

Pendant longtemps, les développeurs ont utilisé des tableaux, des éléments flottants, des blocs en ligne et d'autres propriétés CSS pour les mises en page pour donner aux blocs l'emplacement souhaité. Les choses simples, comme le centrage vertical, étaient assez compliquées. La création d'une mise en page basée sur des grilles flexibles est considérée comme une pratique compétente, c'est pourquoi les frameworks CSS basés sur le maillage sont largement utilisés.

L'idée principale de la mise en page avec flexbox est de donner au conteneur la possibilité de modifier la largeur / hauteur (et l'ordre) de ses éléments pour remplir au mieux l'espace (dans la plupart des cas, pour prendre en charge tous les types d'affichages et de tailles d'écran).

Spécifications principales Module de disposition de boîte flexible CSS (ou simplement Flexbox) - fournit d'excellents outils pour résoudre une grande variété de tâches. Flexbox vous donne la possibilité de contrôler la taille, l'ordre et l'alignement des éléments sur plusieurs axes. Vous pouvez également contrôler la répartition de l'espace libre entre les éléments et bien plus encore.

Flexbox présente plusieurs avantages:

1. Le nom même de «flex» indique clairement que tous les blocs peuvent être rendus très flexibles très facilement. Les éléments nécessaires peuvent être compressés et étirés selon des règles spéciales, occupant ainsi tout l'espace nécessaire.
2. La ligne de base du texte est facilement alignée verticalement et horizontalement.
3. L'ordre des éléments dans le modèle ne joue pas un rôle décisif. Si nécessaire, il peut être modifié dans les styles, ce qui est particulièrement important pour certains aspects de la mise en page adaptative.
4. Pour remplir tout l'espace fourni, les éléments peuvent automatiquement s'aligner sur plusieurs lignes ou colonnes.
5. La plupart des langues du monde ont la forme d'écrire de droite à gauche rtl (de droite à gauche), contrairement au ltr habituel (de gauche à droite). Une caractéristique de f lexbox est qu'elle est adaptée à cela, car pour lui il y a un concept de début et de fin, et non pas de droite et de gauche. Dans les navigateurs avec les paramètres rtl, tous les éléments sont automatiquement organisés dans l'ordre inverse.
6. La syntaxe des règles CSS est intuitive et facile à apprendre.

Historique de Flexbox

• 2008 année - Le groupe de travail CSS discute de l'application "Flexible Box Model" basée sur XUL (XML User Interface Language - un langage de balisage dans les applications Mozilla) et XAML (Extensible Application Markup Language - un langage de balisage pour les applications Microsoft).
• année 2009 - Publication du projet de "Module de mise en page de boîte flexible". Chrome et Safari ajoutent une prise en charge partielle alors que Mozilla commence à prendre en charge la syntaxe de type XUL connue sous le nom de Flexbox 2009. Si, lors de la lecture d'un article de blog ou de la recherche d'informations sur Flexbox à partir d'une autre source, vous rencontrez des expressions telles que display: box; ou des propriétés comme box - (*), cela signifie que vous disposez d'une version obsolète de Flexbox, modèle 2009.
• 2011 - Tab Atkins prend en charge le développement de Flexbox et publie 2 brouillons. Dans ces brouillons, la syntaxe change considérablement. Chrome, Opera et IE 10 implémentent la prise en charge de cette syntaxe, connue sous le nom de flexbox 2011.
• 2012 an - la syntaxe est à nouveau modifiée et affinée. La spécification reçoit le statut de recommandation candidate et devient «Flexbox 2012». Opera introduit la prise en charge sans préfixe, Chrome prend en charge la spécification actuelle avec des préfixes et Mozilla sans eux, IE10 ajoute la prise en charge de la syntaxe obsolète «flexbox 2011».
• Depuis 2014 de l'année - Tous les nouveaux navigateurs prennent en charge les dernières spécifications (même Internet Explorer 11). Si un manuel ou un article de blog Flexbox contient des constructions telles que display: flex; et flex- (*), ils affichent les informations actuelles contenues dans la version actuelle de la spécification.

Prise en charge du navigateur

Curieusement, mais la syntaxe obsolète de l'échantillon 2009 est assez bonne supporté par La plupart des navigateurs sont pris en charge dans: Chrome, Firefox 2+, Safari 3.1+, etc. Il est disponible presque partout, à l'exception d'IE 9 et des versions antérieures d'IE et d'Opera. Mais malheureusement, la mise en œuvre de cette technologie dans les navigateurs était incomplète et partiellement incohérente, ce qui a conduit à la révision de la spécification.

Malgré le fait que l'ancienne syntaxe soit prise en charge par les navigateurs, son utilisation n'est pas recommandée, car l'ancienne version de la spécification n'est plus pertinente. À l'avenir, après un certain temps, les navigateurs cesseront certainement de le prendre en charge. Dans tous les cas, étant donné que la nouvelle syntaxe est beaucoup plus facile à apprendre et à appliquer, il est très probable que son implémentation sera plus approfondie. Les navigateurs qui ne prennent toujours pas en charge les modules Flexbox commenceront à le faire sous une nouvelle forme, prévue par la dernière spécification, qui a reçu le statut de CR. ( Recommandation du candidat - * un candidat à la recommandation de la norme, ce qui signifie qu'il est techniquement prêt pour la mise en œuvre et ne devrait pas être sujet à changement.)

Quant à IE 10, c'est peut-être le seul cas de prise en charge d'une version intermédiaire et non parfaite de Flexbox (qui utilise l'affichage: flexbox; value). (* De plus, il nécessite l'utilisation du préfixe du vendeur -ms-).

Syntaxe de base

Puisque flexbox est un module entier, pas seulement une propriété unique, il combine de nombreuses propriétés. Certains d'entre eux devraient s'appliquer au conteneur (l'élément parent, le soi-disant conteneur flexible), tandis que d'autres propriétés s'appliquent aux éléments enfants, ou éléments flexibles.

Pour commencer à utiliser, vous devez spécifier le conteneur affichage: flex ou affichage: inline-flex .

Flex_container (affichage: flex;)

Les principales propriétés du conteneur flexible.

L'un des concepts de base de Flexbox est les axes.

• Axe principal flex-container est la direction dans laquelle l'agencement de tous ses enfants est construit.
• Axe transversal Est la direction perpendiculaire à l'axe principal.

Par défaut, l'axe principal dans les paramètres régionaux ltr est situé de gauche à droite et l'axe transversal est de haut en bas. Lorsque vous utilisez la propriété css flex-direction de base, vous pouvez définir la direction de l'axe principal du conteneur flex.

flex-direction - la direction de l'axe principal

Démo des principales propriétés d'un conteneur flexible

Valeurs disponibles flex-direction:

• rangée (valeur par défaut): de gauche à droite (en rtl de droite à gauche)
• rangée arrière : de droite à gauche (en rtl de gauche à droite)
• colonne : de haut en bas
• inverser la colonne : en bas

justifier-contenu - alignement sur l'axe principal.

Propriété CSS justifier-contenu le principal axe.

Valeurs disponibles justifier-contenu:

• flex-start (valeur par défaut): les blocs sont pressés au début de l'axe principal
• extrémité flexible : blocs pressés à l'extrémité de l'axe principal
• centre : les blocs sont situés au centre de l'axe principal
• l'espace entre : le premier bloc est situé au début de l'axe principal, le dernier bloc est à la fin, tous les autres blocs sont répartis uniformément dans l'espace restant.
• autour de l'espace : tous les blocs sont répartis uniformément le long de l'axe principal, divisant également tout l'espace libre.

align-items - alignement sur l'axe transversal.

Propriété CSS align-items détermine comment les éléments sont alignés le long transversal axe.

Valeurs disponibles align-items:

• flex-start : blocs pressés au début de l'axe transversal
• extrémité flexible : blocs pressés contre l'extrémité de l'axe transversal
• centre : les blocs sont situés au centre de l'axe transversal
• référence : blocs alignés sur leur ligne de base
• étendue (valeur par défaut) : les blocs sont étirés, occupant tout l'espace disponible sur l'axe transversal, tout en tenant compte largeur min / largeur maximale le cas échéant.

Propriétés CSS flex-direction , justifier-contenu, align-items Doit être appliqué directement sur le conteneur flexible et non sur ses enfants.

Organisation multi-lignes de blocs à l'intérieur d'un conteneur flexible.

enveloppe souple

Tous les exemples ci-dessus ont été construits en tenant compte de la disposition des blocs sur une seule ligne (une seule colonne). Il faut dire que par défaut, le conteneur flex placera toujours les blocs à l'intérieur de lui-même sur une seule ligne. Mais la spécification prend également en charge le mode multiligne. La multiligne à l'intérieur du conteneur flex est responsable de la propriété CSS flex-wrap.

Valeurs disponibles enveloppe souple:

• nowrap (valeur par défaut): les blocs sont disposés sur une ligne de gauche à droite (en rtl de droite à gauche)
• emballage : les blocs sont disposés en plusieurs rangées horizontales (s'ils ne tiennent pas sur une seule rangée). Ils se suivent de gauche à droite (en rtl de droite à gauche)
• retour à la ligne : pareil que emballagemais les blocs sont dans l'ordre inverse.

flex-flow - raccourci pratique pour flex-direction + flex-wrap

En réalité, flex-flow offre la possibilité dans une propriété de décrire la direction de l'axe transversal principal et multiligne. Défaut flex-flow: ligne nowrap .

Flex_container (flex-direcrion: colonne; flex-wrap: wrap;) / * ou * / .flex_container (flex-flow: colonne wrap;)

align-content

Il y a aussi une propriété align-content , qui détermine comment les lignes de blocs résultantes seront alignées verticalement et comment elles partageront tout l'espace du conteneur flexible.

Important: align-content ne fonctionne qu'en mode multiligne (c'est-à-dire au cas où flex-wrap: wrap; ou flex-wrap: wrap-reverse;).

Valeurs d'alignement de contenu disponibles:

• flex-start : rangées de blocs pressés jusqu'au début du conteneur flexible.
• extrémité flexible : rangées de blocs pressés à l'extrémité du conteneur flexible
• centre : des rangées de blocs sont au centre du conteneur flexible
• l'espace entre : la première rangée de blocs est située au début du conteneur flexible, la dernière rangée de blocs est le bloc à la fin, toutes les autres rangées sont réparties uniformément dans l'espace restant.
• autour de l'espace   : les rangées de blocs sont réparties uniformément du début à la fin du conteneur flexible, en divisant également tout l'espace libre.
• étendue (valeur par défaut): Les rangées de blocs sont étirées afin d'occuper tout l'espace disponible.

Démo Flexbox

Règles CSS pour les éléments enfants du conteneur flexible (blocs flexibles)

flex-base - la taille de base d'un seul bloc flexible

Définit la taille initiale de l'axe du bloc flexible avant que les transformations basées sur d'autres facteurs de flexion ne lui soient appliquées. Il peut être défini dans n'importe quelle unité de mesure (px, em,%, ...) ou auto (par défaut). S'il est défini sur auto, les tailles de bloc (largeur, hauteur) sont prises comme base, qui, à son tour, peut dépendre de la taille du contenu si elle n'est pas spécifiée explicitement.

flex-grow - "avidité" d'un seul bloc flexible

Détermine dans quelle mesure un seul bloc flexible peut être plus grand que les éléments voisins, si nécessaire. flex-grow accepte une valeur sans dimension (par défaut 0)

Exemple 1:

• flex-grow: 1   alors ils auront la même taille
• Si l'un d'eux a flex-grow: 2   , alors ce sera 2 fois plus que tout le monde

Exemple 2:

• Si tous les blocs flex à l'intérieur du conteneur flex ont flex-grow: 3 ,    ils seront de la même taille
• Si l'un d'eux a flex-grow: 12   , il sera alors 4 fois plus grand que tout le monde

C'est-à-dire la valeur absolue flex-grow   ne détermine pas la largeur exacte. Il détermine son degré de «cupidité» par rapport aux autres flex-blocks du même niveau.

flex-shrink - facteur de compressibilité pour un seul bloc-flex

Détermine dans quelle mesure le flex-block sera réduit par rapport aux éléments voisins à l'intérieur du flex-container en cas de manque d'espace libre. La valeur par défaut est 1.

flex - une entrée courte pour les propriétés flex-grow, flex-shrink et flex-base

Flex_block (flex-grow: 12; flex-shrink: 3; flex base: 30em;) / * or * / .flex_block (flex: 12 3 30em;)

Démonstration flex-grow, flex-shrink et flex-base

align-self - alignement d'un seul bloc flexible le long de l'axe transversal.

Permet de remplacer la propriété du conteneur flexible. align-items   pour un bloc flexible séparé.

Valeurs d'alignement automatique disponibles (mêmes 5 options que pour align-items)

• flex-start   : flex-block pressé au début de l'axe transversal
• extrémité flexible   : flex-block pressé à l'extrémité de l'axe transversal
• centre   : bloc flexible situé au centre de l'axe transversal
• baselin   : bloc flexible aligné sur la ligne de base
• étendue (valeur par défaut) : le flex-block est étiré pour occuper tout l'espace disponible sur l'axe transversal, tout en tenant compte largeur min / largeur maximale le cas échéant.

ordre - l'ordre d'un seul bloc flexible à l'intérieur d'un conteneur flexible.

Par défaut, tous les blocs se succèdent dans l'ordre spécifié en html. Cependant, cet ordre peut être modifié à l'aide de la propriété flex-block de baseline. Il s'agit d'un entier et sa valeur par défaut est 0.

La valeur de commande ne spécifie pas la position absolue de l'élément dans la séquence. Il détermine le poids de la position de l'article.

Dans ce cas, les blocs se succèdent le long de l'axe principal dans l'ordre suivant: bloc Flex 5, bloc Flex 1, bloc Flex 3, bloc Flex 4, bloc Flex 2

Démo aligner et commander

   Bootstrap a enfin commencé à supporter la flexbox. Dans Bootstrap 4, Flexbox sera activé pour les composants suivants:

• l'ensemble du système de grille (mixins et classes prédéfinies) qui passera de float à display: flex;
• affichage des formulaires: table; remplacera l'affichage: flex;
• les composants multimédias seront affichés: table;

Utilisez Flexbox - c'est cool!

Danny Markov

Le design est assez simple - il se compose d'un conteneur centré au milieu, à l'intérieur duquel nous avons un en-tête, une section principale, un panneau latéral et un sous-sol. Voici les principaux «tests» que nous devons faire pour garder CSS et HTML aussi propres que possible:

1. Placez les quatre sections principales de la mise en page.
2. Rendez la page réactive (la barre latérale tombe en dessous du contenu principal sur les petits écrans).
3. Aligner le contenu de l'en-tête - navigation à gauche, bouton à droite.

Comme vous pouvez le voir, à des fins de comparaison, nous avons laissé tout aussi simple que possible. Commençons par le premier test.

Test 1. Placement des sections de page

Solution Flexbox

Ajouter un affichage: fléchissez dans le conteneur et définissez la direction verticale des enfants. Cela positionne toutes les sections les unes sous les autres.

Conteneur (affichage: flex; flex-direction: column;)

Maintenant, nous devons nous assurer que la section principale et le panneau latéral sont situés côte à côte. Étant donné que les conteneurs flexibles sont généralement unidirectionnels, nous devons ajouter un élément supplémentaire.

Ensuite, nous définissons cet élément pour afficher: flex et flex-direction avec la direction opposée.

Enveloppeur de barre principale et latérale (affichage: flex; flex-direction: row;)

La dernière étape consiste à définir les dimensions de la section principale et de la barre latérale. Nous voulons que le contenu principal soit trois fois plus large que la barre latérale, ce qui est facile à faire avec flex ou pourcent.

Comme vous pouvez le voir, Flexbox a tout bien fait, mais nous avions également besoin de quelques propriétés CSS et d'un élément HTML supplémentaire. Voyons comment fonctionne la grille CSS.

Solution de grille CSS

Il existe plusieurs options pour utiliser CSS Grid, mais nous utiliserons la syntaxe grid-template-areas comme la plus appropriée pour nos besoins.

Nous définissons d'abord quatre zones de grille, une pour chaque section de la page:

   header (grid-area: header;) .main (grid-area: main;). sidebar (grid-area: sidebar;) footer (grid-area: footer;)

Nous pouvons maintenant personnaliser notre grille et déterminer l'emplacement de chaque zone. Au début, le code peut sembler assez compliqué, mais dès que vous vous familiarisez avec le système de grille, il devient plus facile à comprendre.

Conteneur (affichage: grille; / * Nous déterminons la taille et le nombre de colonnes de notre grille. L'unité fr fonctionne comme Flexbox: les colonnes divisent l'espace libre dans la ligne en fonction de leurs valeurs. Nous aurons deux colonnes - la première est trois fois la seconde. * / Grille-modèle -colonnes: 3fr 1fr; / * Nous connectons les zones précédemment créées aux emplacements dans la grille. La première ligne est l'en-tête. La deuxième ligne est divisée entre la section principale et le panneau latéral. La dernière ligne est le pied de page. * / grid-template-areas: "header header" " barre latérale principale "" footer footer "; / * L'espacement entre les cellules de la grille sera de 60 pixels * / grid-gap: 60px;)

C'est tout! Notre mise en page correspondra désormais à la structure ci-dessus et nous l'avons configurée pour ne pas avoir à traiter de marge ou de remplissage.

Test 2. Rendre la page responsive

Solution Flexbox

Cette étape est strictement liée à la précédente. Pour résoudre sur Flexbox, nous devons changer la direction du flex et ajuster la marge.

   @media (max-width: 600px) (.main-and-sidebar-wrapper (flex-direction: column;) .main (margin-right: 0; margin-bottom: 60px;))

Notre page est assez simple, donc il n'y a pas beaucoup de travail dans la requête média, mais dans une mise en page plus complexe, vous devrez refaire beaucoup.

Solution de grille CSS

Comme nous avons déjà défini des zones de grille, nous avons juste besoin de redéfinir leur ordre dans la requête média. Nous pouvons utiliser le même paramètre de colonne.

   @media (max-width: 600px) (.container (/ * Alignement des zones de grille pour la mise en page mobile * / grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer";))

Ou nous pouvons redéfinir la disposition entière à partir de zéro si nous pensons que cette solution est plus propre.

@media (max-width: 600px) (.container (/ * Refaire la grille dans une disposition à une seule colonne * / grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer";) )

Essai 3. Alignement des composants des bouchons

Solution Flexbox

Bouton

Nous avons déjà fait une mise en page similaire à Flexbox dans l'un de nos anciens articles -. La technique est assez simple:

En-tête (affichage: flex; justifier-contenu: espace entre;)

Maintenant, la liste de navigation et le bouton sont alignés correctement. Il ne reste plus qu'à placer les objets à l'intérieur