Accentsconagua
Voici le premier article
Voici le prochain article
Le troisième article
Le quatrième article
Share
Si vous avez commencé à écrire des CSS il y a quelques années, il est probable que vous vous soyez habitué à quelques bizarreries de mises en page CSS que vous avez considérées comme inévitables. Par exemple, utiliser des éléments en position absolue à l’intérieur d’éléments en position relative ou utiliser clearfix en conjonction avec des flotteurs pour réaliser des grilles de colonnes.
Intuitivement, nous avons tous pensé qu'il devrait y avoir un meilleur moyen. Après tout, il est un peu étrange que la meilleure solution de centrage vertical implique l’utilisation de affichage: table; et styles associés. Pourquoi devrions-nous utiliser hacks faire fonctionner les choses fondamentales?
le boîte souple module, ou boîte souple En bref, la solution émergente à beaucoup de nos problèmes passés et correspond à une multitude de modèles de conception qui sont devenus répandus. L'idée de base derrière flexbox est de permettre à la boîte contenant les éléments de redimensionner et de réorganiser ces éléments pour qu'ils s'adaptent au mieux au conteneur.
Flexbox n'est pas nécessairement destiné à une utilisation sur l'ensemble du site. La grille de spécifications CSS est en cours d'élaboration pour résoudre ce problème, mais elle reste malheureusement dans un état beaucoup moins pris en charge que flexbox, qui prend en charge au moins partiellement tous les navigateurs sauf Opera Mini. En revanche, la spécification de grille CSS est uniquement prise en charge par IE, avec une prise en charge inconnue ou inexistante dans tous les autres navigateurs..
Flexbox est destiné à être utilisé pour des parties discrètes d’une mise en page. Dans cet article, nous aborderons quelques tâches courantes pouvant être exécutées plus efficacement avec flexbox et expliquerons la syntaxe permettant d’atteindre des résultats particuliers. Pour obtenir une vue d'ensemble complète de toutes les options de propriétés, consultez l'article sur les astuces CSS sur flex box. Un guide de Flexbox.
Avant la flexbox, le centrage vertical du contenu dynamique était une tâche non triviale. (Voir cet article de Smashing Mag ainsi que cet article de CSS-Tricks pour le récit complet.) Avec flexbox, tout est devenu plus simple. Nous allons mettre en place un conteneur de base avec des éléments enfants.
Test du centre verticalUn test secondaireTertiaire est pour trois
Notre objectif est de centrer ces éléments verticalement et horizontalement. Avec flexbox, c'est aussi simple que ce qui suit:
.conteneur largeur: 500px; hauteur: 500px; marge: 0 auto; background-color: #dedede; / * Règles de flexion * / display: flex; flex-flow: colonne maintenant justifier-contenu: centre; align-items: centre;
Remarque: que nous n'utilisons pas les versions préfixées par le fournisseur, mais vous devriez! Alternativement, jetez un oeil à Autoprefixer.
Vous aurez remarqué quelques nouvelles règles inconnues appliquées ici; Flexbox est un module qui comprend un certain nombre de propriétés. Pour commencer, le affichage: flex crée notre conteneur flexbox et ses éléments enfants sont automatiquement traités comme des éléments flex.
Sauf indication contraire de notre part, nos articles flexibles s’écouleront en ligne le long de l’axe principal. toutefois, flex-flow (qui est un raccourci pour le flex direction et flex-wrap propriétés) peut modifier les axes principal et transversal. flex-flow: colonne maintenant indique à Flexbox que nous voulons que notre contenu soit affiché dans une colonne verticale et que nous ne voulons pas que nos éléments soient renvoyés à la ligne (ce qui les oblige à passer à la ligne suivante).
justifier le contenu à centre, qui aligne nos articles au centre de l'axe principal, qui est basé sur la direction définie par le flex-flow, dans ce cas l'axe vertical. align-items: centre aligne nos articles par rapport à l'axe secondaire ("croix").
Une approche traditionnelle de la mise en page pose un problème inhérent, en particulier lorsqu'il s'agit de contenu réactif. Lorsque vous utilisez des flottants, par exemple, il est facile de voir le contenu d'une page dans un ordre totalement différent de celui qui est naturel ou cognitif. De plus, il est très difficile de manipuler l'ordre des éléments sur une page. Avec Flexbox, nous allons nous attaquer à l’une des mises en page les plus difficiles à réaliser pour les CSS classiques; une pile d'éléments alignés dans l'ordre inverse et alignés en haut. Donc, en d'autres termes, l'élément qui apparaît premier dans le balisage apparaîtra dernier sur l’écran et l’ajout de nouveaux éléments au bas de la balise les fera apparaître en haut de l’écran.
Nous allons utiliser ce balisage:
Avec le CSS suivant, nous pouvons réaliser ce que nous essayons de faire facilement.
main position: relative; hauteur: 100%; affichage: flex; flex-flow: inversion de colonne maintenant; justifier-contenu: flex-end; align-items: centre;
Cela nous donnera exactement ce que nous visons. Voir les résultats (avec quelques styles supplémentaires pour une visualisation plus facile) ici.
En créant une inversion de colonne sur le flex-flow, nous demandons à flexbox d'inverser l'ordre des éléments. Nous voulons aligner le contenu à la fin de la ligne transversale de la flexbox, qui dans le cas de la colonne inversée est une ligne verticale allant du bas de la boîte vers le haut..
Nous avons également mis align-items: centre pour centrer les éléments dans la colonne horizontalement. Ceci est utile pour tout type d'empilement d'éléments, où l'ordre cognitif (du premier au dernier) ne correspond pas à l'ordre visuel (de haut en bas)..
Il existe de nombreuses situations dans lesquelles vous devez réorganiser des éléments en fonction de la taille de votre écran. Les solutions courantes à ce problème sont généralement compliquées ou bien elles répètent les balises. Regardez cet exemple, où nous avons déplacé une image sélectionnée du flux d'un article au début de l'article en utilisant le simple ordre propriété. Nous utilisons le code HTML suivant:
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Ipsam eum repudiandae ullam ipsum repellendus officiis eaque unaut or porro accusamus placeat earum qui quia quidem totam harum odit voluptates?
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Autem prévoyance voluptas commodi atque. Consommation non naturelle de l'oreille à l'exercice physique du corps, de la santé et de la peau.
Et le CSS qui l'accompagne:
main display: flex; flex-flow: enroulement de ligne; img flex-grow: 1; largeur: 200px; ordre: 3; p flex: 1 auto; ordre: 1; rembourrage: 10px; background-color: #dedede; marge: 0; p: nième enfant (3) ordre: 2; flex: 3 0 50 px; @ Écran uniquement multimédia et (largeur maximum: 600px) img order: 1; p flex: 1 auto; ordre: 2; rembourrage: 10px; background-color: #dedede; marge: 0; p: nième enfant (3) ordre: 3; flex: 3 0 50 px;
Ce n’est que la partie visible de l’iceberg en ce qui concerne la puissance fournie par la flexbox pour réaliser en quelques lignes de code ce qui est généralement beaucoup plus difficile à obtenir..
Combien de fois avez-vous été frustré par l'impossibilité de réaliser 100/3 et avez-vous par la suite créé-t-il des colonnes d'une largeur de 99,9% pour vous rendre compte à quel point la solution proposée est médiocre? Flexbox résout ce problème une fois pour toutes. Prenez le balisage:
EssaiEssaiEssai
Et ajoutez le CSS pour faire apparaître les trois colonnes, parfaitement calculé.
.conteneur display: flex; justifier-contenu: centre; align-content: espace-entre; couleur de fond: #dadada; .column width: 100%; rembourrage: 50px; text-align: center; box-shadow: 0 0 10px # c0c0c0;
Vous voulez un petit caniveau? Aucun problème. Ajoutez simplement de la marge à votre .colonne classe. Les calculs pour un espacement correct sont faits pour vous.
Jetez un coup d'œil à l'impressionnant référentiel GitHub "Résolu par Flexbox" pour plus d'exemples. Flexbox est un module extrêmement puissant, comme nous l’espérons prouvé par le biais de cet article. Quels sont les autres cas d'utilisation puissants et passionnants que vous voyez pour flexbox? Faites le nous savoir dans les commentaires!
