.
et
sont empilés les uns sur les autres, vous devez définir un contexte vertical en premier, que vous pouvez rapidement faire avec flex-direction: colonne . De plus,
obtient la valeur de -1 pour qu'elle apparaisse en premier sur la page. C'est aussi simple que ça.
.example {
affichage: flex;
flex-direction: colonne;
}
bas de page {
ordre: -1;
} Donc, si vous voulez changer une ligne d'éléments dans une colonne ou vice versa, vous pouvez utiliser la propriété flex-direction et la mettre dans la colonne ou en conséquence ( rangée est la valeur par défaut):
Cependant, avec une grande puissance vient une grande responsabilité: gardez à l'esprit qu'un certain nombre de visiteurs utiliseront le clavier pour naviguer dans votre flexbox Si l'ordre des éléments dans la source HTML est en contradiction avec ce qui apparaît à l'écran, l'accessibilité pourrait devenir une préoccupation sérieuse. Pour en savoir plus à ce sujet, ne manquez pas Ordre des sources HTML vs Ordre d'affichage CSS un traitement en profondeur de ce problème par Adrian Roselli, spécialiste de l'accessibilité et de l'ergonomie
Comment aligner des éléments avec Flexbox
Flexbox facilite également l'alignement horizontal et vertical de ses éléments enfants.
Vous pouvez appliquer le même alignement à tous les éléments d'un conteneur flexible avec align-items . Si vous souhaitez des alignements différents pour des éléments individuels, utilisez align-self . L'alignement des éléments dépend de la valeur de la propriété flex-direction . Si sa valeur est ligne (c'est-à-dire que les éléments s'exécutent sur une ligne horizontale), l'alignement s'applique à l'axe vertical. Si flex-direction est réglé sur colonne (c'est-à-dire que les éléments s'exécutent sur une ligne verticale), cela s'applique à l'axe horizontal.
Par exemple, vous avez un des formes que vous souhaitez aligner différemment à l'intérieur d'un élément de conteneur. Vous devez:
Définir la propriété align-self de chaque forme sur la valeur appropriée. Les valeurs possibles sont: centre étirement (l'élément est positionné pour s'adapter à son conteneur), flex-start flex-end et ligne de base (l'élément est positionné à la ligne de base de son conteneur)
Réglez l'élément conteneur sur display: flex
Enfin, faites attention au flex -direction propriété sur le conteneur parent, car sa valeur affecte l'alignement du childeren.
.example {
affichage: flex;
flex-direction: colonne;
}
.rouge {
align-self: centre;
}
.bleu {
align-self: flex-start;
}
.rose {
align-self: flex-end;
} Essayez de basculer la propriété flex du conteneur parent dans la démo ci-dessous de ligne à colonne et vice versa pour voir ce comportement en action: [19659036] Si tous les éléments d'un conteneur parent doivent être alignés de la même manière, vous pouvez utiliser la propriété align-items dans le conteneur parent. Les valeurs possibles sont centre flex-start flex-end tronçon (valeur par défaut: les éléments sont étirés pour s'adapter à leur conteneur) , et ligne de base (les éléments sont positionnés à la ligne de base de leurs conteneurs).
.example {
affichage: flex;
align-items: centre;
} Comme d'habitude, essayez de basculer la valeur de la propriété flex-direction sur l'élément parent entre ligne et colonne pour voir comment l'effet de la valeurs que vous appliquez aux modifications align-items :
Justification du contenu avec Flexbox
Une autre propriété pour l'alignement est justify-content ce qui est très pratique lorsque vous voulez distribuer espace disponible uniformément entre plusieurs éléments.
Les valeurs acceptées sont: centre flex-start flex-end espace-entre ] (les éléments sont positionnés avec des espaces entre les lignes), et l'espace autour (les éléments sont positionnés avec un espace avant, entre et après les lignes).
Par exemple, dans l'élément
.content et [19659020]. Pour l'instant, ils sont tous poussés à gauche de la page. Si vous souhaitez afficher ces trois éléments de manière à créer de l'espace entre eux, mais pas sur les côtés gauche et droit du premier et du dernier élément respectivement, réglez justify-content à l'intérieur de .main (leur conteneur parent) vers espace entre :
.main {
affichage: flex;
justify-content: espace-entre;
} Essayez aussi d'expérimenter avec space-around et notez les différents résultats:
Dans la démo ci-dessus, j'ai également centré le texte à l'intérieur de l'élément
horizontalement et verticalement en utilisant justify-content (centrage horizontal) et align-items (centrage vertical) et paramétrant les deux sur centre :
header {
hauteur: 100vh;
affichage: flex;
justify-content: centre;
align-items: centre;
} Flexing Items Dimensions avec Flexbox
Avec la propriété flex flex vous pouvez contrôler la longueur de votre élément par rapport à d'autres éléments à l'intérieur d'un conteneur Flex.
Cette propriété est un raccourci pour propriétés individuelles suivantes:
flex-grow – Un nombre spécifiant combien l'élément va croître par rapport à d'autres éléments flexibles
flex-shrink – Un nombre spécifiant combien le l'élément rétrécira par rapport aux autres éléments flexibles
flex-basis – La longueur de l'élément. Les valeurs acceptées sont: auto hériter ou un nombre suivi de "%", px em ou toute autre unité de longueur.
Par exemple, pour obtenir trois colonnes égales, il suffit de définir flex: 1 pour chaque colonne et vous avez terminé:
nav, aside, .content {
flex: 1;
} Si vous souhaitez que la zone de contenu soit deux fois plus large que
et
définissez flex: 2 pour le .content et laissez les deux autres 1 :
C'est juste l'application la plus simple de la propriété flex il est aussi possible de régler flex-grow flex-shrink ] et flex-basis valeurs, mais cela dépasse le cadre de cet article.
Autres ressources
Si vous êtes prêt à aller de l'avant et apprendre plus sur la maîtrise de flexbox, consultez ces ressources: [19659090] Conclusion
Comme vous pouvez le voir, flexbox peut rendre nos vies beaucoup plus faciles si nous avons besoin de contrôler la position des éléments sur un site web. Il est solide et fait des hacks, des conteneurs qui s'effondrent ou d'autres choses bizarres avec lesquelles nous avons dû faire face tous les jours, obsolètes.
Comme mentionné, CSS Grid est une meilleure option pour la mise en page entière. la portée de ce que Flexbox peut faire. Le point fort de Flexbox est l'alignement d'éléments associés dans une dimension, mais c'est aussi un moyen pratique de replacer le travail de Grid dans des navigateurs légèrement plus anciens, si nécessaire.
Christian Krammer est concepteur web depuis plus d'une décennie. gagne son argent dans une petite agence de publicité. Il est également le fier propriétaire de
css3files.com un guide complet de CSS3. En plus de cela il est marié, le père fier d'un garçon de six ans et un cinéphile. Son portfolio peut être consulté à
chriskrammer.com .
