Tout sur les propriétés flexbox
Le concept derrière les propriétés de Flexbox est de permettre au conteneur de changer automatiquement la largeur, la hauteur et l'ordre de ses articles pour remplir au mieux l'espace disponible. Cela peut être très utile pour accueillir des éléments dans des tailles d'écran et des appareils différents. Les éléments sont développés pour remplir tout espace libre, ou réduits pour éviter un débordement.
Grille Flexbox CSS pour débutants
CSS est l'une des premières et des plus faciles choses à apprendre dans le développement et la conception Web, mais ne confondez pas sa simplicité par manque de fonctionnalités. Il possède un certain nombre de fonctionnalités et de capacités incroyables prêtes à être exploitées, dont l'une est son module de mise en page relativement nouveau: les propriétés Flexbox.
Les propriétés de Flexbox sont l'une des nouvelles dispositions disponibles pour CSS3, et il y a beaucoup à apprendre à ce sujet. Ici, nous nous familiarisons avec la mise en page et comment l'utiliser. Avant de commencer, voici un petit aperçu des propriétés de Flexbox:
Quels sont les modes de mise en page?
En termes simples, la grille CSS Flexbox est un mode de mise en page. CSS a un certain nombre de modes de disposition existants. Le mode de disposition des blocs (comme display: block) existe depuis longtemps. Les dispositions de blocs sont un bon choix pour styliser des documents complets. En fait, un navigateur Web traite plusieurs éléments comme les divs et les paragraphes comme niveau de bloc par défaut.
Un autre mode de mise en page commun est en ligne. La balise forte, la balise d'entrée et la balise d'ancrage sont des exemples d'éléments de niveau en ligne. Les outils de développement de Google Chrome vous permettent même d'afficher le `` style calculé '' d'un élément pour déterminer les propriétés et valeurs CSS qui ont été appliquées aux éléments non définis explicitement par le développeur.
La disposition relativement récente des propriétés Flexbox (boîte flexible) a été conçue comme une méthode plus efficace de disposition, d'alignement et de distribution d'espace entre les éléments du conteneur, même si la taille de ces éléments est dynamique ou inconnue. D'où le terme «flexible».
Le concept des propriétés Flexbox
La chose la plus importante à propos des propriétés de Flexbox est qu'elle est indépendante de la direction. Alors que la disposition des blocs est basée sur la verticale et la disposition en ligne est basée sur l'horizontale, Flexbox n'est ni l'un ni l'autre. Le bloc et l'inline fonctionnent bien dans les bonnes situations, mais manquent de flexibilité pour prendre en charge des applications complexes ou volumineuses, en particulier lorsqu'il s'agit de changer l'orientation, l'étirement, le rétrécissement, le redimensionnement et autrement de changer les dimensions des éléments.
Où les propriétés Flexbox sont-elles utilisées?
Comme toute autre présentation CSS, Flexbox est mieux utilisé dans certaines situations. En particulier, il convient aux mises en page et composants à petite échelle d'une application. Pour les mises en page à plus grande échelle, une mise en page Grille serait le choix le plus judicieux.
Pourquoi Flexbox est-il préféré?
Beaucoup de développeurs et de concepteurs préfèrent les propriétés Flexbox chaque fois qu'ils le peuvent (parfois trop souvent!). En effet, les propriétés Flexbox sont plus faciles à utiliser; le positionnement des éléments est beaucoup plus simple, vous pouvez donc obtenir des dispositions plus complexes avec moins de codage. En d'autres termes, cela simplifie le processus de développement.
Un guide des propriétés de Flexbox
Maintenant que vous en savez un peu plus sur les propriétés de Flexbox et comment et pourquoi cela fonctionne, voici un guide détaillé de la mise en page. Le modèle de la présentation est composé d'un conteneur parent, également appelé «conteneur flexible». Les enfants immédiats de ce conteneur sont appelés «articles flexibles».
La mise en page a subi plusieurs itérations et changements de syntaxe au fil des ans depuis la création de son premier projet en 2009. La dernière spécification Flexbox est prise en charge sur les navigateurs Web suivants:
- Opera 17+
- Internet Explorer 11+
- Mozilla Firefox 28+
- Google Chrome 29+
- Apple Safari 6.1+
- Android 4.4+
- iOS 7.1+
La terminologie utilisée dans les propriétés Flexbox
Voici un aperçu de la terminologie de base utilisée dans la présentation des propriétés de Flexbox:
- Affichage: cette commande est utilisée pour définir le conteneur flexible. Il peut être en ligne ou en bloc, selon le Il définit également le contenu flexible pour tous les éléments du conteneur. Exemple:
.récipient (
affichage: flex; / * ou inline-flex * /
)
- Ordre: les éléments Flex sont disposés par défaut selon l'ordre d'origine, mais la propriété 'order' peut contrôler l'ordre dans lequel les éléments apparaissent dans le conteneur. Exemple:
.article (
commande: ;
)
- Flex-direction: cet ordre définit l'axe principal, définissant la direction dans laquelle les éléments flex sont placés dans le conteneur. Les éléments flexibles peuvent être principalement disposés dans des directions verticales ou horizontales. Exemple:
.récipient (
flex-direction: ligne | ligne inversée | colonne | colonne inversée;
)
- Flex-grow: cet ordre définit la capacité de l'élément flex à évoluer automatiquement s'il a de l'espace. Il peut accepter une valeur sans unité pour servir de proportion. Cette valeur détermine la quantité d'espace que l'article doit occuper dans le conteneur flexible. Par exemple, si tous les éléments ont un flex-grow défini sur 1, l'espace restant dans le conteneur sera distribué également à tous les enfants. Si la valeur est 2, l'espace restant occupera deux fois plus d'espace que le reste. Exemple:
.article (
flex-grow:; / * par défaut 0 * /
)
- Flex-shrink: Cela fait exactement le contraire de flex-grow, en ce sens qu'il rétrécit les éléments flexibles lorsque cela est nécessaire. Exemple:
.article (
flex-rétrécissement:; / * par défaut 1 * /
)
- Flex-based: cet ordre définit la taille par défaut des éléments avant que le reste de l'espace ne soit distribué. Il peut s'agir d'une longueur, comme 5rem ou 20%, ou d'un mot-clé. Le mot clé «auto» indique que la largeur et la hauteur de l'élément doivent être mesurées, et le mot clé «content» indique que l'élément est dimensionné en fonction de son contenu. Exemple:
.article (
base flexible: | auto; / * auto par défaut * /
)
- Flex: il s'agit d'un raccourci combiné pour les trois propriétés ci-dessus: flex-grow, flex-based et flex-shrink. La valeur par défaut est «0 1 auto».
.article (
flex: aucun | (||)
)
- Justify-content: cet ordre définit l'alignement de l'axe principal et aide à répartir l'espace libre supplémentaire s'il en reste lorsque les éléments sont inflexibles ou ont atteint leur taille maximale. Cela permet également de contrôler l'alignement de l'élément en cas de débordement.
.récipient (
justifier-contenu: flex-start | extrémité flexible | centre | espace entre | autour de l'espace;
)
- Aligner les éléments: permet de définir le comportement par défaut de la disposition des éléments flexibles sur l'axe transversal de la ligne actuelle. Il s'agit essentiellement d'une version de «justifier le contenu» sur l'axe transversal, qui est perpendiculaire à l'axe principal. Exemple:
.récipient (
align-items: flex-start | flex-end | centre | référence | étendue;
)
- Align-content: cet ordre aligne les lignes du conteneur au cas où il y aurait de l'espace supplémentaire sur l'axe transversal. Il est similaire à «justifier le contenu», mais pour l'axe transversal au lieu de l'axe principal. S'il n'y a qu'une seule ligne d'éléments flexibles, cette propriété n'a aucun effet. Exemple:
.récipient (
align-content: flex-start | flex-end | centre | espace entre | autour de l'espace | étendue;
)
Utilisation des propriétés Flexbox
Afin d'utiliser la disposition Flexbox, vous pouvez simplement définir la propriété d'affichage sur l'élément parent HTML, comme ci-dessous:
.flex-container (
affichage: -webkit-flex; / * Safari * /
affichage: flex;
)
Si vous préférez afficher comme un élément en ligne, vous pouvez écrire:
.flex-container (
affichage: -webkit-inline-flex; / * Safari * /
affichage: inline-flex;
)
Vous devez uniquement définir cette propriété sur le conteneur flexible parent et ses éléments flexibles immédiats. Les conteneurs enfants deviendront automatiquement des articles flexibles.
Cours recommandés
- Cours en ligne sur jQuery gratuit
- Cours en ligne sur JS angulaire gratuit
- Formation en ligne sur Mudbox
- Formation de certification en Ruby gratuit
Propriétés Flexbox - Propriétés du conteneur Flex
Il existe de nombreuses façons de regrouper les propriétés Flexbox, et la façon la plus simple de les découvrir est de les diviser en propriétés de conteneur et d'élément Flex. Nous venons de couvrir certaines des propriétés des conteneurs flexibles ci-dessus. Regardons le reste:
-
Flex-direction: ligne ou colonne
La propriété flex-direction peut être présentée sous forme de colonnes verticalement ou de lignes horizontalement. Avec la direction des lignes, les éléments flexibles sont empilés de gauche à droite par défaut. La ligne inverse change cette direction de droite à gauche. La direction de la colonne est de haut en bas par défaut, et la fonction d'inversion de colonne l'inverse dans une direction de bas en haut.
-
Flex-wrap: nowrap ou wrap
La propriété flex-wrap contrôle si les enfants du conteneur flex sont disposés sur plusieurs lignes ou sur une seule ligne, et la direction dans laquelle les nouvelles lignes sont empilées. La valeur nowrap voit les éléments flexibles affichés sur une seule ligne, rétrécis pour s'adapter à la largeur du conteneur par défaut. La valeur d'habillage voit les éléments flexibles affichés dans différentes lignes dans un sens de gauche à droite ou de haut en bas. Vous pouvez également ajouter un retour à la ligne pour modifier l'ordre. La valeur par défaut est nowrap.
-
Flex-flow
Cette propriété est essentiellement un raccourci pour définir ensemble les propriétés flex-direction et flex-wrap. La valeur par défaut est 'row nowrap'. Exemple:
.flex-container (
flex-flow: ||
)
-
Justifier-contenu
La propriété justification-contenu a quatre valeurs: flex-start pour aligner les éléments sur le côté gauche du conteneur; flex-end pour aligner les articles sur le côté droit; centre pour s'aligner avec le centre; espace entre pour aligner les articles avec un espacement égal entre eux, avec le premier et le dernier articles alignés sur les bords du conteneur; et un espace autour pour aligner l'élément flexible avec un espacement égal autour d'eux, y compris le premier et le dernier élément. Flex-start est la valeur par défaut.
-
Aligner les éléments
Cette propriété a cinq valeurs: étirer pour mettre à l'échelle des éléments flexibles pour remplir toute la largeur ou la hauteur du début à la fin du conteneur; flex-start pour empiler les articles au départ croisé; flex-end pour empiler les articles à l'extrémité transversale; centre pour aligner les éléments au centre de l'axe transversal; et la ligne de base pour aligner les éléments de sorte que leurs lignes de base soient alignées. Stretch est la valeur par défaut.
-
Aligner le contenu
Cette propriété aligne les lignes d'un conteneur flexible lorsqu'il y a de l'espace supplémentaire dans l'axe transversal. Ses valeurs sont les suivantes: étirer pour répartir l'espace après chaque ligne; flex-start pour empiler les articles vers le départ croisé; flex-end pour empiler les articles vers le cross-end; centre pour empiler les articles au centre de l'axe transversal; espace autour pour répartir également l'espace autour des éléments flexibles. La valeur par défaut est stretch.
Propriétés Flexbox - Propriétés des éléments Flex
Maintenant que vous connaissez les propriétés du conteneur Flexbox, regardons les propriétés de l'élément:
- Commande
Cette propriété contrôle l'ordre d'apparition des enfants du conteneur flexible. Ils sont commandés par défaut dans le conteneur flexible.
.flex-item (
commande: ;
)
Vous pouvez réorganiser les éléments flexibles sans avoir à restructurer le code HTML. La valeur par défaut est zéro.
- Alignez-vous
Cette propriété permet de remplacer l'alignement par défaut d'un élément flexible spécifique. Vous pouvez utiliser les valeurs de align-items pour cette propriété.
.flex-item (
align-self: auto | flex-start | flex-end | centre | référence | étendue;
)
La valeur automatique dans align-self est calculée par la valeur des align-items sur l'élément parent. Si l'élément n'a pas de parent, l'étirement est utilisé à la place.
Exemples de base
C'est tout ce que vous devez savoir pour utiliser la disposition de la grille CSS Flexbox. Il est maintenant temps de mettre en pratique ce que vous avez appris. Voici quelques exemples qui vous montrent comment toutes ces propriétés se rejoignent. Commençons par quelque chose d'absolument simple:
.parent (
affichage: flex;
hauteur: 300px;
)
.child (
largeur: 100px;
hauteur: 100px;
marge: auto;
)
Ceci est un exemple de centrage parfait. Les valeurs de hauteur et de largeur peuvent être modifiées à votre guise. La clé ici est de définir la marge sur «auto» afin que le conteneur flexible absorbe automatiquement tout espace supplémentaire. Assez simple!
Passons maintenant à l'ajout de propriétés supplémentaires: une liste avec six éléments de dimensions fixes qui peuvent être auto-dimensionnables. Ils doivent être répartis uniformément sur l'axe horizontal.
.flex-container (
affichage: flex;
justifier-contenu: espace autour;
)
Ensuite, essayons de centrer une navigation alignée à droite pour les écrans de taille moyenne et de la rendre à une seule colonne sur les petits appareils.
/* Grand */
.la navigation (
affichage: flex;
flex-flow: enroulement de ligne;
justifier-contenu: flex-end;
)
/ * Écrans moyens * /
@media all and (max-width: 800px) (
.la navigation (
justifier-contenu: espace autour;
)
)
/ * Petits écrans * /
@media all and (max-width: 500px) (
.la navigation (
flex-direction: colonne;
)
)
Il est temps d'aller plus loin! Essayons une mise en page mobile d'abord avec trois colonnes, avec un pied de page et un en-tête pleine largeur et indépendante de l'ordre source.
.wrapper (
affichage: flex;
flex-flow: enroulement de ligne;
)
/ * Nous disons à tous les articles une largeur de 100% * /
.header, .main, .nav, .aside, .footer (
flex: 1 100%;
)
/ * Nous nous appuyons sur l'ordre source pour une approche mobile d'abord * /
/ * Écrans moyens * /
@media all and (min-width: 600px) (
.aside (flex: 1 auto; )
)
/ * Grands écrans * /
@media all and (min-width: 800px) (
.main (flex: 2 0px; )
.aside-1 (commande: 1; )
.main (commande: 2; )
.aside-2 (commande: 3; )
.footer (commande: 4; )
)
Conclusion
Ce ne sont que quelques exemples de base. Vous pouvez jouer beaucoup plus avec les dispositions de grille CSS Flexbox, et elles sont absolument précieuses si vous voulez créer une page Web réactive.
Articles recommandés
Voici donc quelques articles qui vous aideront à obtenir plus de détails sur les propriétés de la flexbox, le code de la flexbox et également sur la grille de la flexbox css.
- HTML vs XML - Les principales différences
- CSS3 vs CSS - En quoi sont-ils différents? (Infographie)
- Principales différences entre HTML et CSS
- HTML5 vs Flash