Get best of the week

Tout sur le mot-clé auto en CSS

CSS a un mot auto- clé que vous pouvez utiliser lorsque vous travaillez avec diverses propriétés d'éléments. Ce sont des propriétés qui affectent la position, la hauteur et la largeur des éléments. Ce sont des propriétés conçues pour ajuster l'indentation des éléments et leurs autres caractéristiques. J'avais envie quelque part d'enregistrer tout ce que je sais auto. Par exemple, faites tout cela sous forme de matériel qui pourrait devenir une référence pour ceux qui sont intéressés par les subtilités de l'utilisation de ce mot-clé.

Le mot-clé autoa une signification particulière lorsqu'il est utilisé avec diverses propriétés CSS. Nous analyserons les caractéristiques autoconcernant l'application de cette valeur à diverses propriétés. Ici, tout d'abord, nous nous intéresserons aux détails techniques du travail.



auto. Nous parlerons également de la façon de tirer le meilleur parti de cette propriété. Vous trouverez ici des notes sur les autocas d' utilisation et des exemples.

Propriété de largeur: auto


La largeur initiale des éléments de bloc, tels que <div>ou <p>, est la valeur auto. Cela conduit au fait que de tels éléments occupent tout l'espace horizontal du bloc qui les contient.

«La largeur du bloc contenant l'élément» est, conformément à la spécification CSS, une valeur calculée par la formule suivante:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’

Lorsque la largeur de l'élément spécifié valeur auto, il est possible de configurer des propriétés telles que margin, padding, borderet il est, par conséquent, ne sera pas supérieure à son élément parent. La largeur du bloc restreignant le contenu de l'élément de bloc sera la taille du contenu moins la largeur de ses parties définies par les propriétés margin(champ, retrait extérieur), padding(retrait intérieur) et border(bordure).


Comparaison de largeur: auto et largeur: 100%

Considérez, à titre d'exemple, les caractéristiques de l'appareil des dispositions ci-dessus.

Voici le balisage HTML:

<div class="wrapper">
  <div class="item"></div>
</div>

Voici le CSS:

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

Ici, tout semble comme il se doit, le contenu est limité à l'élément parent.


L'élément se trouve dans l'élément parent.

Et que se passe-t-il si vous spécifiez que la largeur de l'élément (width) ne doit pas être spécifiée en tant que valeurauto, mais comment100%? Avec cette approche, l'élément occupera 100% de la largeur de l'élément parent, auquel s'ajoutera l'espace alloué aux marges droite et gauche. Voici le style approprié:

.item {
      width: 100%;
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

Mais que se passe-t-il après l'avoir appliqué à un élément.


L'élément s'étend au-delà de l'élément parent (la direction du texte est ltr).

L'élément est large568px . Il est calculé comme suit:

‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px

Si la propriété est directiondéfinie sur une valeur ltr, la valeur margin-rightsera complètement ignorée. Dans notre cas, c'est exactement ce qui se passe. Cependant, s'il est directionenregistré rtl, il sera ignoré margin-left.


L'élément va au-delà de l'élément parent (la direction du texte est rtl).

Ici, vous pouvez expérimenter avec l'exemple de code.

▍ Cas d'utilisation pour la largeur: auto


Afin de bien comprendre le sens auto, pas assez d'histoire sur les bases. Par conséquent, j'ai mené des recherches visant à montrer des scénarios d'utilisation pratique de la propriété width: auto.

Différentes largeurs d'éléments dans les versions mobile et de bureau de la page



Options des applications mobiles et de bureau

Il existe un groupe de boutons. Il est nécessaire que dans la version mobile de l'application, ils soient situés côte à côte (un élément contenant un bouton doit occuper 50% de l'élément parent). Dans la version de bureau de l'application, chaque bouton doit occuper toute la largeur du conteneur parent. Comment faire?

Voici le balisage HTML:

<div class="group">
    <div class="group__item">
        <button class="c-button">Sign In</button>
    </div>
    <div class="group__item">
        <button class="c-button c-button--ghost">Register</button>
    </div>
</div>

Afin de placer les boutons les uns à côté des autres dans la version mobile de la page, j'ai utilisé la disposition flexbox. Voici le CSS pertinent:

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

Dans la version de bureau, j'ai besoin des boutons pour occuper toute la largeur de l'élément parent. Il peut y avoir une tentation d'utiliser le design width: 100%. Vérité? Mais il existe une meilleure solution:

@media (min-width: 800px) {
    /*    flexbox-    */
    .group {
        display: block;
    }

    .group__item {
        width: auto;
    }
}

Puisqu'il .group__items'agit d'un élément de bloc, l'utilisation width: autoconduit au fait que cet élément remplit parfaitement avec lui-même l'espace disponible dans son élément parent.

Voici une version de travail de cet exemple.

Propriété de hauteur: auto


Si nous envisageons de travailler avec une propriété heightqui définit la hauteur des éléments, tout semble différent. La hauteur de l'élément, lors de l'application de la valeur auto, correspond à la hauteur du contenu de l'élément.

Prenons l'exemple suivant:

<div class="wrapper">
  <div class="item">What's my height?</div>
</div>

Pour qu'un élément avec une classe .itemoccupe toute la hauteur du conteneur, vous pouvez utiliser l'une des méthodes suivantes:

  1. Vous pouvez définir un élément avec une classe de .wrapperhauteur fixe, puis ajouter une .itempropriété au style d'élément height: 100%.
  2. Vous pouvez utiliser la .wrapperdisposition de la boîte flexible pour l'élément , afin que l'enfant .itemsoit, par défaut, étiré à la taille de l'élément parent.

Voici le CSS:

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}


Éléments parents et enfants

Champs et mot-clé auto


Les champs (marges extérieures) sont le plus souvent utilisés pour le centrage horizontal d'éléments dont la largeur est connue.

Prenons un exemple.


L'élément à centrer. Le

rectangle bleu doit être centré horizontalement. À cette fin, vous pouvez utiliser le style suivant:

.element {
    margin-left: auto;
    margin-right: auto;
}

En ce qui concerne la spécification CSS:

si les propriétés «margin-left» et «margin-right» sont définies sur «auto», la largeur des marges est la même. Cela conduit à l'alignement horizontal de l'élément par rapport aux bords du bloc y compris.


Les champs d'un élément ont la même largeur.

Voici une démo de cet exemple.

▍Utilisation de la marge: propriété automatique pour les éléments positionnés de manière absolue



Élément centré

Un autre scénario, moins courant, pour appliquer une valeurautoest de centrer des éléments positionnés de façon absolue à l'aide d'une constructionmargin: auto. S'il y a un élément qui doit être centré à l'intérieur de l'élément parent à la fois horizontalement et verticalement, il peut sembler que vous ayez besoin d'utiliser la propriététranslateXoupour celatranslateY.

Pour que la propriétémargin: autonous permette d'aligner correctement l'élément, les conditions suivantes doivent être remplies:

  1. La largeur et la hauteur de l'élément sont spécifiées.
  2. La propriété de l'élément est définie position: absolute.

Voici le balisage HTML:

<div class="wrapper">
  <div class="item">I am centered.</div>
</div>

Voici le code de style:

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Voici une démonstration de cette technique d'alignement.

Présentations Flexbox et personnalisation automatique des champs


L'utilisation de champs configurés automatiquement peut, dans certains cas, s'avérer très utile. Si l'élément enfant possède un champ dont les dimensions sont définies à l'aide de la valeur auto, il sera déplacé au maximum dans l'élément parent vers le côté opposé au champ configuré. Par exemple, si une propriété est affectée à un élément flexible margin-left: auto, elle sera déplacée au maximum vers la droite.

Regardons la disposition suivante. Il existe deux éléments enfants rectangulaires situés dans l'élément Flexbox parent.


Une paire d'éléments dans un conteneur flexbox

Nous avons besoin que l'élément # 2 soit déplacé vers la bordure droite du conteneur. L'utilisation de la valeurautode la propriété estidéalepour celamargin-left:

.wrapper {
    display: flex;
}

.item-2 {
    margin-left: auto;
}

Voici ce qui s'est passé après l'application de ce style.


L'élément numéro 2 est déplacé vers le bord droit du conteneur.

Il convient de noter que cette technique fonctionne également avec les éléments alignés verticalement. Dans cet exemple, appliquez le style d'élément # 2 suivant:

.item-2 {
    margin-top: auto;
}

Voici le résultat.


L'élément n ° 2 est déplacé vers le bord inférieur du conteneur.

De plus, s'il n'y a qu'un seul élément enfant, pour l'aligner horizontalement et verticalement, vous pouvez utiliser la propriétémargin: auto. Supposons que dans le conteneur il n'y ait que l'élément numéro 1, qui doit être aligné comme ça. Pour ce faire, nous utilisons le style suivant:

.item-1 {
    margin: auto;
}

Cela suffit pour centrer l'élément.


Article n ° 1 centré sur le conteneur

Propriété lexFlex et valeur automatique


Lors du développement de mises en page flexbox, vous pouvez utiliser la propriété pour les éléments enfants flex: auto. Que signifie ce design? Le fait est que lorsqu'un élément enfant a une propriété flex: auto, cela équivaut au fait que l'élément est affecté à un style flex: 1 1 autosimilaire à la construction suivante:

    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

Voici ce que MDN dit à ce sujet : «Les dimensions d'un élément sont déterminées en fonction de ses propriétés widthet height, mais l'élément peut être étiré, prenant ainsi plus d'espace libre disponible dans le conteneur flexible. Un élément, afin de tenir dans un conteneur, peut et est compressé à sa taille minimale. Ceci est similaire au réglage du style flex: 1 1 auto. "

En d'autres termes, la taille de l'élément avec la propriété flex: autosera définie en fonction de sa largeur et de sa hauteur. Mais cet élément peut s'étirer ou se contracter en fonction de l'espace disponible dans le conteneur. Je ne savais pas à ce sujet jusqu'à ce que je commence à rechercher cet article.

Comme d'habitude, considérons un exemple.

Voici le balisage:

<div class="wrapper">
  <div class="item item-1">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Voici les styles:

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}

Et voici le résultat.


Utilisation de flex: auto

Voici une version de travail de cet exemple.

Disposition de la grille et valeur automatique


▍Utilisez auto pour ajuster les colonnes



Utilisation de la grille-modèle-colonnes: style auto 1fr 1fr

Lorsque vous développez des dispositions de grille, vous pouvez utiliser la valeurautolors de la configuration des colonnes. Cela signifie que la largeur des colonnes dépendra de la taille de leur contenu. Voici ce que je veux dire:

.wrapper {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}

▍Mises en page de la grille et utilisation de la valeur automatique pour définir les champs


Lorsque vous utilisez des dispositions de grille, la valeur autopeut être utilisée pour personnaliser les champs d'élément. Cette opération est effectuée pour obtenir des résultats similaires à ceux obtenus lors de l'utilisation autodans les présentations Flexbox. Si nous travaillons avec une disposition de grille et que l'un des éléments de la grille a, par exemple, un style margin-left: auto, il sera déplacé vers la droite de la disposition et sa largeur sera sélectionnée en fonction de la taille de son contenu.

Prenons l'exemple suivant.


Disposition de la grille

Nous avons besoin que la largeur d'un élémentItem 1dépende de son contenu, et non de l'espace de grille dont il dispose. Pour ce faire, nous pouvons utiliser le style suivant:

    .item-1 {
        margin-left: auto;
    }

Voici le résultat de l'application de ce style.


La largeur d'un élément dépend de son contenu.

Mises en page RTL


Il convient de noter que l'utilisation des propriétés margin-left: autoou se margin-right: automontre bien pour les mises en page LTR (pour les mises en page dans lesquelles le contenu est situé de gauche à droite), par exemple, pour celles qui sont utilisées pour afficher des textes écrits en anglais. Mais sachez que sur les sites multilingues, ces significations sont inversées. Encore mieux, et je recommanderais de faire exactement cela, en utilisant les propriétés Flexbox ou Grid dans de telles maquettes, en faisant cela dans les cas où l'objectif peut être atteint avec leur aide. Si cela ne peut pas être réalisé à l'aide de telles propriétés, recourez à la définition des propriétés de marge en utilisant autouniquement en dernier recours. Au lieu de cela, il est préférable d'utiliser les propriétés logiques de CSS .

Propriété de débordement


Lorsque vous travaillez avec des éléments de pages Web, nous devons connaître la taille du contenu que ces éléments sont capables de contenir. Si le contenu est plus grand que ce que l'élément peut contenir, vous devez afficher la barre de défilement pour travailler avec ce contenu.

Pour résoudre ce problème, vous pouvez essayer d'utiliser le style suivant:

.element {
    overflow-y: scroll;
}

Mais avec cette approche, une barre de défilement peut apparaître même si l'élément affiche un contenu dont la taille ne dépasse pas la taille de l'élément. Voici un exemple.


Élément auquel le style overflow-y: scroll est affecté

Dans le navigateur Chrome sur la plate-forme Windows, la barre de défilement est toujours affichée. Ceci est un exemple de mauvais comportement d'un élément qui peut dérouter l'utilisateur.

L'utilisation de cette valeurautovous permet de vous assurer que la barre de défilement ne s'affiche que dans les cas où la hauteur du contenu dépasse la hauteur du conteneur.

Ce quisuit est indiquésur MDN : «Dépend de l'agent utilisateur. Si le contenu est placé dans la zone d'élément correspondant à l'espace interne de l'élément, il ressemble au contenu affiché dans le modevisiblemais cela crée un nouveau contexte de formatage de bloc. "Les navigateurs de bureau affichent des barres de défilement si le contenu est supérieur à la taille de l'élément."

Propriétés des éléments de positionnement


Propriétés CSS-responsables pour le positionnement des éléments, tels que top, right, bottomet left, la valeur est maintenue auto. Ce dont je veux parler maintenant, je l'ai appris lors de la rédaction de cet article.

Considérez la disposition suivante.


Disposition de démonstration

Il existe un élément parent avec une propriété personnaliséepaddingqui définit l'indentation. Cet élément a un autre élément, un enfant. L'élément enfant est absolument positionné, mais ses propriétés, qui sont responsables du positionnement, ne sont pas configurées. Voici les styles:

.wrapper {
    position: relative;
    padding: 16px;
}

.item {
    position: absolute;
    width: 100px;
    height: 100px;
}

Le fait est qu'en CSS, chaque propriété a une certaine valeur initiale (la valeur par défaut). Si vous examinez un élément enfant et examinez les styles calculés, quelle sera la valeur de sa propriété left?


Examen des styles calculés de l'enfant.

La valeur par défaut de la propriétéleftest la suivante16px. D'où cela vient-il si nous ne lui demandons même pas? La raison en est que les propriétés d'un élément positionné de manière absolue sont cohérentes avec son parent le plus proche dont la propriété est définieposition: relative. L'élément parent a une propriétépadding: 16px. Ainsi, l'enfant est placé à 16 pixels des côtés supérieur et gauche du parent. Intéressant, non?

Vous avez peut-être maintenant une question sur l'utilisation que nous en faisons. Je propose de traiter cela.

Imaginez qu'un enfant doit être placé dans100pxà partir de la bordure gauche de l'élément parent lors de l'affichage de la page sur de petits écrans, et sur de grands écrans, vous pouvez placer l'élément à l'endroit où il se trouverait lors de l'application des valeurs par défaut.

Voici un style adapté aux petits écrans:

.wrapper {
    position: relative;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

Comment réinitialiser la valeur de la propriété leftlors de la visualisation d'une page sur de grands écrans? De plus, la valeur left: 0ici ne peut pas être utilisée, car cela entraînera le fait que l'élément enfant est pressé contre le bord de l'élément parent, mais nous n'en avons pas besoin. Jetez un œil à la mise en page illustrée ci-dessous. Il clarifie mon point.


L'élément enfant ne se comporte pas correctement.

Pour réinitialiser les propriétés de positionnement de l'élément enfant, vous devez utiliser la constructionleft: auto. Ceci est indiqué sur le MDN comme suit: "Un élément est placé horizontalement comme il faudrait le positionner s'il s'agissait d'un élément statique."

Cela signifie que lors du placement de l'élément, la propriété de l'élémentpaddingparentsera prise en compteet il sera garanti que l'élément enfant ne «colle» pas au bord de l'élément parent.

Voici le CSS:

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

@media (min-width: 800px) {
    .item {
        /*  -  left: 16px */
        left: auto;
    }
}

Il en va de même pour une propriété top. Les valeurs calculées des propriétés rightet bottomdéfinies par défaut sont respectivement équivalentes à la largeur et à la hauteur de l'élément.

Voici un projet de démonstration pour cette section.

Exemples d'utilisation de la valeur automatique


Je dois dire tout de suite que les exemples donnés ici ne couvrent pas toutes les possibilités de sens auto, mais j'espère que ce que je vous dirai vous sera utile.

Arrow Flèche d'infobulle


Lors de la création d'infobulles, elles doivent avoir une flèche pointant vers l'objet auquel l'infobulle fait référence. Ces conseils sont donc plus compréhensibles. Dans le cas où nous développons un système de conception, nous devons prévoir différents états d'invites. Par exemple, invite avec une flèche pointant vers la gauche et avec une flèche pointant vers la droite.


Flèches directionnelles pointant dans des directions différentes

.tooltip:before {
    /*   */
    position: absolute;
    left: -15px;
}

/*    ,   */
.tooltip.to-right:before {
    /*   */
    position: absolute;
    left: auto;
    right: -15px;
}

Notez que j'ai utilisé la propriété left: autopour remplacer la propriété left: -15pxdans l'implémentation d'origine. Et donc vous savez, cela est utilisé assez souvent. Par conséquent, je recommanderais d'utiliser ce qui suit au lieu de l'approche ci-dessus:

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /*   */
    position: absolute;
    right: auto;
    left: 100%;
}

En utilisant une valeur 100%, nous évitons d'utiliser une valeur fixe (largeur de flèche), ce qui peut entraîner un dysfonctionnement du système si la taille de la flèche change. Cette solution est mieux adaptée à d'éventuelles modifications futures.

▍ Carte composante


Peut-être que votre projet a une carte de composant sur laquelle, dans le coin supérieur gauche, se trouve une sorte d'icône. Il peut jouer un rôle décoratif ou être un bouton pour effectuer une action. Quel que soit le rôle de l'icône, les composants doivent être conçus de sorte que l'icône puisse être positionnée à la fois dans son coin supérieur gauche et dans son coin supérieur droit. Voici à quoi ça ressemble.


Carte de composant avec une icône située sous différents angles

À l'aide d'une propriété,left: autovous pouvez facilement réinitialiser la valeur de la propriété spécifiée dans son implémentation de base. Voici le CSS:

.card .icon {
    position: absolute;
    left: 15px;
    top: 15px;
}

.card.is-right .icon {
    left: auto;
    right: 15px;
}

▍Modules Flexbox et valeur de la propriété de marge automatique


Les dispositions Flexbox offrent aux développeurs Web des possibilités vraiment infinies. En combinant les capacités de telles dispositions avec des champs, dont la valeur est utilisée pour les configurer auto, nous pouvons créer des dispositions très puissantes.

Prenons l'exemple suivant.


Ajustement automatique des champs d'élément

Il y a un conteneur vertical contenant le titre de l'élément, sa description et le bouton situé à droite. Nous avons besoin que le bouton soit fixé sur le côté droit du conteneur.

Voici le balisage:

<div class="item">
    <div class="item-group">
        <!--    -->
    </div>
    <button class="item__action">Confirm</button>
</div>

Voici les styles:

    .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item__action {
        margin-left: auto;
    }

Terminé! L'utilisation de la propriété margin-left: autovous permet de placer le bouton dans le coin supérieur droit de l'élément. Ce qui est encore plus agréable, c'est que nous pouvons utiliser des propriétés CSS logiques si nous développons un site multilingue. Le CSS ressemblera à ceci:

.item__action {
    margin-inline-start: auto;
}

Si vous voulez en savoir plus sur le style RTL, voici une ressource utile dédiée à ce sujet.

▍Mises en page de la grille et valeur de marge automatique


En ajustant les champs des éléments de la grille, vous pouvez définir des valeurs fixes et des pourcentages, et aussi - vous pouvez utiliser la valeur auto. Je suis particulièrement intéressé par le sens auto. Jetez un œil à la disposition suivante.


Disposition de la grille

Voici un fragment du balisage:

<p class="input-group">
    <label for="">Full Name</label>
    <input type="email" name="" id="">
</p>

Voici les styles:

.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

Je voudrais aligner les étiquettes, éléments label, sur le bord gauche des champs pour saisir des données (éléments input). Pour ce faire, vous devez appliquer le style suivant:

.input-group label {
    margin-left: auto;
}

L'application de ce style donnera le résultat illustré dans la figure suivante.


Légendes alignées à gauche pour la saisie de données

▍ Conception de fenêtres modales



Fenêtre modale

Lorsque vous travaillez sur la conception de fenêtres modales, il est important de considérer que le contenu qui doit être affiché dans la fenêtre peut ne pas s'y adapter entièrement. Pour que la fenêtre fonctionne normalement dans cette situation, vous pouvez utiliser le style suivant:

.modal-body {
    overflow-y: auto;
}

Grâce à ce style, la barre de défilement n'apparaît que si le contenu de la fenêtre est suffisamment grand.

Sommaire


Dans cet article, nous avons examiné les fonctionnalités de l'application du mot clé autoen CSS. Nous espérons que vous trouverez utile ce que vous lisez aujourd'hui.

Chers lecteurs! Dans quelles situations utilisez-vous la valeur autoen CSS?

More articles:


All Articles