Fermer

octobre 3, 2018

Création de mises en page flexibles avec Flexbox –


L’introduction suivante à Flexbox est un extrait du prochain livre de Tiffany, CSS Master, 2e édition qui sera disponible sous peu.

Avant CSS Grid est arrivé. était Flexbox (connu officiellement sous le nom de Module de disposition de boîte flexible CSS ). La Flexbox a été conçue pour gérer la présentation dans une direction: une ligne ( flex-direction: ligne ou ligne-inverse ) ou une colonne ( flex- direction: colonne ou colonne-inverse ). Cela contraste avec Grid, qui représente les colonnes de rangées et .

Il est simple de créer une structure de boîte flexible simple: ajoutez display: flex ou : inline- flex à l'élément contenant. Ces valeurs pour l’affichage déclencheront un contexte de formatage flex pour les enfants de cet élément. Comme avec Grid, les modes flex et inline-flex sont à l'intérieur du mode d'affichage. Nous définissons ces valeurs sur le conteneur, qui se comporte comme une zone de niveau bloc ou un niveau en ligne, respectivement. Les enfants de ce conteneur sont ensuite disposés selon les règles de mise en page flex

Note:. Les anciennes versions de navigateurs basés sur Blink tels que Chrome (≤ 28), et les navigateurs basés sur WebKit comme Safari (≤ 8), ont besoin d'un préfixe du vendeur. Si votre projet prend toujours en charge ces navigateurs, vous devez utiliser Affichage: -webkit-flex ou Affichage: -webkit-ligne-flex . Les anciennes versions de Firefox (≤ 21) nécessitent également un préfixe. Utilisez -moz-flex et -moz-inline-flex pour prendre en charge ces navigateurs.

En ajoutant display: flex ou display: inline -flex pour un élément contenant, ses enfants immédiats deviennent des éléments flexibles, comme indiqué dans l'image ci-dessous. Les éléments Flex peuvent être des enfants d'éléments ou des nœuds de texte non vides. Par exemple, le balisage ci-dessous génère trois boîtes d'éléments flexibles que chacune fonctionne selon les règles de mise en page flexible:..

Ce texte est contenu par un élément SPAN Ce texte est contenu par un élément B     Ce nœud de texte est toujours un élément flexible.

Si aucune autre propriété n'est définie, chaque élément flexible aura la même hauteur que son élément le plus haut (tel que déterminé par le contenu). Il s'empilera également horizontalement (ou verticalement lorsque le document dispose d'un mode d'écriture vertical) sans habillage et sans espace entre les bords de chaque zone. Les éléments flexibles peuvent déborder du conteneur.

 Une liste avec affichage: flex appliqué à l'élément contenant ul Une liste comportant l'affichage: flex appliqué à l'élément ul [19659011] Cela ne semble peut-être pas si grave, mais cela simplifie le code nécessaire pour toute une gamme de modèles d'interface utilisateur. Voyons quelques exemples.

Prenons le code d’objet multimédia suivant:

Lorem ipsum dolor sit amet, consectetur elip adipiscing elite, a été victime d’une incarcération temporelle et dolore magna aliqua.

Avant Flexbox, nous aurions peut-être associé le balisage précédent au CSS suivant:

 .media__object img {
    float: gauche;
    hauteur: auto;
    largeur: 150px;
}
.media__object__text {
    rembourrage à gauche: 170px;
}
/ * Utilisons le hack de clearfix! * /
.media__object :: after {
    contenu: ' ';
    bloc de visualisation;
    clarifier les deux;
}

Cette disposition fonctionne, mais elle présente un inconvénient majeur: elle nous oblige à limiter la largeur de nos images afin de savoir la quantité de rembourrage à utiliser. Cela limite notre capacité à utiliser ce même composant dans plusieurs contextes. Vous voudrez peut-être une image de 150 pixels de large lorsque ce composant est utilisé pour un widget «Histoires associées» et une image de 75 pixels de large seulement pour les commentaires.

Essayons cela avec Flexbox. Voici notre CSS mis à jour:

 .media__object {
    affichage: flex;
}
.media_object img {
    marge droite: 20px;
}

C’est beaucoup moins de CSS. Un avantage supplémentaire est que nous n’avons pas à nous soucier de la largeur ou de la hauteur de notre image. Nous ne devons pas non plus nous préoccuper de la compensation des flotteurs. Que l'image soit 200 pixels de large ou 20 pixels de large, .media__object__text viendra buter contre la zone de marge de notre élément img .

Création de composants de formulaire flexibles avec flex

Un autre Le cas d'utilisation de Flexbox est la création de composants de formulaire flexibles et alignés verticalement. Considérons la configuration de l'interface figurant dans l'image ci-dessous.

 Un champ de formulaire avec un bouton adjacent Un champ de formulaire avec un bouton adjacent

Ici, nous avons une commande d'entrée de forme et d'un bouton adjacent. Les deux sont alignés verticalement et notre bouton a une largeur de 150 pixels.

Et si nous voulions que notre élément input s'agrandisse pour remplir l'espace disponible dans son conteneur? Sans Flexbox, nous aurions besoin de JavaScript et de la main pour mettre à jour la largeur de l'entrée en réponse aux modifications de la largeur de son parent. Avec Flexbox, cependant, nous pouvons simplement utiliser flex .

La ​​propriété flex est en réalité un raccourci pour trois autres propriétés.

  • flex-grow indique qu'un élément devrait croître si nécessaire et doit être un entier positif. Sa valeur initiale est 0 .
  • flex-shrink indique qu'un élément doit être réduit si nécessaire et doit être un entier positif. Sa valeur initiale est 1
  • -flex base:. indique la largeur initiale ou minimum (lorsque l'axe de flexion est horizontal) ou à la hauteur d'un élément (quand il est vertical). Il peut être une longueur ou d'un pourcentage, ou auto et sa valeur initiale est Bien qu'il soit possible de régler chacun de ces individuellement auto .

la spécification recommande fortement d'utiliser le flex sténographie. Voici un exemple:

 div {
    affichage: flex;
}
entrée [type="text"]bouton {
    bordure: 0;
    font: hériter;
}
entrée [type="text"] {
    flex: 1 0 auto;
}
bouton {
    background: # 003;
    couleur: fumée blanche;
    bloc de visualisation;
    text-align: center;
    flex: 0 0 150px;
}

Nous avons utilisé ici flex: 1 0 auto pour notre élément d’entrée . Depuis sa valeur flex-grow est 1 il s'agrandira pour occuper l'espace disponible de son parent. Pour l’élément bouton nous avons utilisé flex: 0 0 150px . Les valeurs de 0 pour flex-grow et flex-shrink empêchent la largeur du bouton d'augmenter ou de diminuer, tandis que les valeurs flex-base ] valeur 150px définit sa largeur.

Comme vous pouvez le voir dans l'image ci-dessous, notre bouton reste la même taille, mais la largeur de l'entrée se développe pour occuper l'espace restant

 L'effet de flex: 0 0 150px L'effet de flex: 0 0 150px

Le casse-tête de flex-grow et flex -shrink est qu'elles sont proportionnelles. Oui, flex: 1 0 auto signifie que notre entrée entrée sera plus large que notre bouton. Mais changer la valeur de ce notre bouton flex propriété à flex. 1 0 auto ne signifie pas nécessairement que les deux éléments auront la même taille, comme le montre l'image suivante [19659037] les deux éléments ont la même valeur flex, mais sont toujours différentes tailles  » width= »1024″ height= »398″ class= »aligncenter size-large wp-image-169188″/> les deux éléments ont la même valeur flex, mais sont toujours différentes tailles

au lieu de cela, les éléments flexibles seront redimensionnées pour remplir le récipient, en leur utilisé min -width et les valeurs max-width (qui peuvent être leurs valeurs initiales).

Malheureusement, nous ne pouvons pas utiliser les unités fr avec le propriétés flex ou flex-based . Utilisez plutôt des valeurs de longueur ou de pourcentage.

Centrage vertical avec Flexbox

Pour finir, voyons comment centrer verticalement le contenu avec Flexbox. Le centrage vertical des éléments est l’une des tâches les plus difficiles à réaliser avec CSS, en particulier si la hauteur de votre contenu est inconnue. Mais avec Flexbox, nous n’avons besoin que d’une ligne supplémentaire de CSS: [ align-items: center :

 .flex-container {
    affichage: flex;
    align-items: centre;
}
. 

Maintenant, nos articles flex et leur contenu sont centrés verticalement dans le conteneur flexible, comme le montre l'image ci-dessous

 La distribution des articles flex avec align-éléments: centre La distribution des articles flex avec align-éléments : center

Création de présentations de type grille avec Flexbox

Dans la plupart des cas, vous souhaiterez utiliser Grid pour créer des présentations de type grille. Cependant, vous pouvez vous trouver des boîtes voulant que align quand il y a un nombre pair d'éléments, mais aussi d'élargir pour remplir l'espace disponible quand il y a un nombre impair.

 Une mise en page de grille avec des cellules en expansion Une mise en page de grille avec cellules en expansion

Voici le balisage que nous allons utiliser:

  • A
  • B
  • C
  • D
  • E
  • F
  • G

Par défaut, les éléments flexibles ne sont pas bouclés. Pour réaliser la présentation ci-dessus, nous devons les emballer à l’aide de la propriété flex-wrap . Il accepte trois valeurs: nowrap (la valeur initiale), envelopper et enveloppez-inverse . Nous allons utiliser wrap ici:

 .flex-aligné {
    affichage: flex;
    enveloppe souple: enveloppe;
}

Il ne nous reste plus qu'à indiquer comment nos éléments flexibles doivent se comporter et quelle doit être leur largeur maximale. Comme nous voulons un maximum de quatre colonnes, nous allons définir notre valeur de base flexible à à 25% . Et puisque nous voulons que nos articles flexibles pour se dilater pour remplir l'espace disponible, nous allons définir flex-grow à 1. Nous allons continuer flex-rétractable à 0 pour que nos boîtes n'occupent jamais moins de 25% de leur contenant:

 .llex-alignés li {
    fléchir: 1 0 25%;
}

En savoir plus sur la Flexbox

Flexbox est bien plus que ce que nous avons présenté ici. “ Un guide complet de Flexbox de CSS-Tricks” détaille toutes les propriétés et valeurs. Vous pouvez également consulter « Résolu par Flexbox » de Philip Walton, qui présente des modèles d'interface utilisateur simplifiés grâce à Flexbox.

Choosing flex ou

Si vous développez des dispositions de page ou de composant, vous pouvez vous demander quand il vaut mieux utiliser Flexbox et quand utiliser Grid.

  • Utilisez Grid lorsque vous souhaitez organiser les éléments en rangées et alignées horizontalement et horizontalement.
  • Utilisez Flexbox lorsque vous souhaitez organiser des éléments dans une rangée ou une colonne lorsque vous souhaitez aligner des éléments verticalement ou horizontalement, mais pas les deux.

Vidéo de Jen Simmons “. ] Flexbox contre CSS Grid – Quel est le meilleur? ”vous explique certains éléments à prendre en compte lors du choix entre Grid et Flexbox. Rachel Andrew « Dois-je utiliser la grille ou Flexbox? » est une autre grande ressource pour comprendre à la fois.

Dans la pratique, vos projets seront probablement mélanger ces deux techniques, ainsi que des flotteurs. Par exemple, vous pouvez utiliser la grille pour définir la présentation générale de la page, en utilisant Flexbox pour votre menu de navigation ou zone de recherche et flotteurs pour placer des tables ou des images.






Source link