Get best of the week

Alles über das Auto-Schlüsselwort in CSS

CSS verfügt über ein Schlüsselwort auto, das Sie beim Arbeiten mit verschiedenen Eigenschaften von Elementen verwenden können. Dies sind Eigenschaften, die sich auf Position, Höhe und Breite von Elementen auswirken. Hierbei handelt es sich um Eigenschaften, mit denen die Einrückung von Elementen und ihre anderen Eigenschaften angepasst werden können. Ich hatte irgendwo den Wunsch, alles aufzuzeichnen, was ich weiß auto. Zum Beispiel, um dies alles in Form von Material anzuordnen, das als Referenz für diejenigen dienen könnte, die an den Feinheiten der Verwendung dieses Schlüsselworts interessiert sind.

Das Schlüsselwort autohat eine besondere Bedeutung, wenn es mit verschiedenen CSS-Eigenschaften verwendet wird. Wir werden die Merkmale autobezüglich der Anwendung dieses Wertes auf verschiedene Eigenschaften analysieren . Hier werden wir uns zunächst für die technischen Details der Arbeit interessieren.



auto. Wir werden auch darüber sprechen, wie Sie diese Eigenschaft optimal nutzen können. Hier finden Sie Hinweise zu Anwendungsfällen autound Beispiele.

Width-Eigenschaft: auto


Die Anfangsbreite von Blockelementen wie <div>oder <p>ist der Wert auto. Dies führt dazu, dass solche Elemente den gesamten horizontalen Raum des Blocks einnehmen, der sie enthält.

"Breite des Blocks, der das Element enthält" ist gemäß der CSS-Spezifikation ein Wert, der nach der folgenden Formel berechnet wird:

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

Wenn die Breite des Elements den angegebenen Wert angibt auto, können Eigenschaften wie margin, konfiguriert werden padding, borderund es ist daher nicht größer als das übergeordnete Element. Die Breite des Blocks, der den Inhalt des Blockelements einschränkt, entspricht der Größe des Inhalts abzüglich der Breite seiner Teile, die durch die Eigenschaften margin(Feld, äußerer Einzug), padding(innerer Einzug) und border(Rand) definiert sind.


Vergleich von Breite: Auto und Breite: 100%

Betrachten Sie als Beispiel die Gerätefunktionen der obigen Layouts.

Hier ist das HTML-Markup:

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

Hier ist das 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;
}

Hier sieht alles so aus, wie es sollte, der Inhalt ist auf das übergeordnete Element beschränkt.


Das Element befindet sich innerhalb des übergeordneten Elements.

Und was passiert, wenn Sie angeben, dass die Breite des Elements (width) nicht als Wert angegeben werden sollauto, sondern wie100%? Bei diesem Ansatz nimmt das Element 100% der Breite des übergeordneten Elements ein, zu dem der dem rechten und linken Rand zugewiesene Platz hinzugefügt wird. Hier ist der passende Stil:

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

Aber was passiert, nachdem es auf ein Element angewendet wurde?


Das Element erstreckt sich über das übergeordnete Element hinaus (Textrichtung ist ltr).

Das Element ist breit568px . Es wird wie folgt berechnet:

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

Wenn die Eigenschaft directionauf einen Wert festgelegt ist ltr, wird der Wert margin-rightvollständig ignoriert. In unserem Fall passiert genau das. Wenn directionaufgezeichnet rtl, wird dies jedoch ignoriert margin-left.


Das Element geht über das übergeordnete Element hinaus (Textrichtung ist RTL).

Hier können Sie mit dem Beispielcode experimentieren.

▍ Anwendungsfälle für die Breite: auto


Um die Bedeutung richtig zu verstehen auto, nicht genug Geschichte über die Grundlagen. Aus diesem Grund habe ich einige Untersuchungen durchgeführt, um Szenarien für die praktische Nutzung der Immobilie aufzuzeigen width: auto.

Unterschiedliche Breite von Elementen in mobilen und Desktop-Versionen der Seite



Optionen für mobile und Desktop-Anwendungen

Es gibt eine Gruppe von Schaltflächen. In der mobilen Version der Anwendung müssen sie sich nebeneinander befinden (ein Element mit einer Schaltfläche sollte 50% des übergeordneten Elements einnehmen). In der Desktop-Version der Anwendung sollte jede Schaltfläche die gesamte Breite des übergeordneten Containers einnehmen. Wie kann man das machen?

Hier ist das HTML-Markup:

<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>

Um Schaltflächen in der mobilen Version der Seite nebeneinander zu platzieren, habe ich das Flexbox-Layout verwendet. Hier ist das relevante CSS:

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

In der Desktop-Version benötigen die Schaltflächen die gesamte Breite des übergeordneten Elements. Möglicherweise besteht die Versuchung, das Design zu verwenden width: 100%. Wahrheit? Aber es gibt eine bessere Lösung:

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

    .group__item {
        width: auto;
    }
}

Da .group__itemes sich um ein Blockelement handelt, width: autoführt die Verwendung dazu, dass dieses Element den in seinem übergeordneten Element verfügbaren Platz perfekt mit sich selbst ausfüllt.

Hier ist eine funktionierende Version dieses Beispiels.

Höheneigenschaft: auto


Wenn wir überlegen, mit einer Eigenschaft zu arbeiten height, die die Höhe der Elemente festlegt, sieht alles anders aus. autoDie Elementhöhe entspricht beim Anwenden eines Werts der Höhe des Elementinhalts.

Betrachten Sie das folgende Beispiel:

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

Damit ein Element mit einer Klasse .itemdie gesamte Höhe des Containers einnimmt, können Sie eine der folgenden Methoden verwenden:

  1. Sie können ein Element mit einer Klasse auf eine .wrapperfeste Höhe festlegen und dann dem Elementstil eine .itemEigenschaft hinzufügen height: 100%.
  2. Sie können das .wrapperFlexbox-Layout für das Element verwenden , sodass das untergeordnete Element .itemstandardmäßig auf die Größe des übergeordneten Elements gestreckt wird.

Hier ist das CSS:

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}


Übergeordnete und untergeordnete Elemente

Felder und Schlüsselwort auto


Felder (äußere Ränder) werden am häufigsten zur horizontalen Zentrierung von Elementen verwendet, deren Breite bekannt ist.

Betrachten Sie ein Beispiel.


Das zu zentrierende Element. Das

blaue Rechteck muss horizontal zentriert sein. Zu diesem Zweck können Sie den folgenden Stil verwenden:

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

Wenden wir uns der CSS-Spezifikation zu:

Wenn die Eigenschaften 'Rand links' und 'Rand rechts' auf 'Auto' gesetzt sind, ist die Breite der Ränder gleich. Dies führt zur horizontalen Ausrichtung des Elements relativ zu den Kanten des Blocks einschließlich des Elements.


Die Felder eines Elements haben dieselbe Breite.

Hier ist eine Demo dieses Beispiels.

▍Randverwendung: Auto-Eigenschaft für absolut positionierte Elemente



Zentriertes Element

Ein anderes, weniger verbreitetes Szenario zum Anwenden eines Wertsautobesteht darin, absolut positionierte Elemente mithilfe eines Konstrukts zu zentrierenmargin: auto . Wenn es ein Element gibt, das sowohl horizontal als auch vertikal innerhalb des übergeordneten Elements zentriert werden muss, müssen Sie möglicherweise die EigenschafttranslateXoderdafür verwendentranslateY.

Damit die Eigenschaftmargin: autodas Element richtig ausrichten kann, müssen die folgenden Bedingungen erfüllt sein:

  1. Die Breite und Höhe des Elements werden angegeben.
  2. Die Eigenschaft des Elements wird festgelegt position: absolute.

Hier ist das HTML-Markup:

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

Hier ist der Style-Code:

.wrapper {
    position: relative;
}

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

Hier ist eine Demonstration dieser Ausrichtungstechnik.

Flexbox-Layouts und automatische Feldanpassung


Die Verwendung automatisch konfigurierter Felder kann sich in einigen Fällen als sehr nützlicher Trick erweisen. Wenn das untergeordnete Element ein Feld hat, dessen Abmessungen anhand des Werts festgelegt werden auto, wird es im übergeordneten Element maximal auf die dem konfigurierten Feld gegenüberliegende Seite verschoben. Wenn eine Eigenschaft beispielsweise einem Flex-Element zugewiesen ist margin-left: auto, wird sie maximal nach rechts verschoben.

Schauen wir uns das folgende Layout an. Im übergeordneten Flexbox-Element befinden sich zwei rechteckige untergeordnete Elemente.


Ein Elementpaar in einem Flexbox-Container

Das Element Nr. 2 muss an den rechten Rand des Containers verschoben werden. Die Verwendung des Wertsautofür die Eigenschaft ist hierfüridealmargin-left:

.wrapper {
    display: flex;
}

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

Folgendes ist passiert, nachdem dieser Stil angewendet wurde.


Element Nummer 2 wird an den rechten Rand des Containers verschoben.

Es ist zu beachten, dass diese Technik auch bei vertikal ausgerichteten Elementen funktioniert. Wenden Sie in diesem Beispiel den folgenden Stil von Element 2 an:

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

Hier ist das Ergebnis.


Element Nr. 2 wird an den unteren Rand des Containers verschoben.

Wenn nur ein untergeordnetes Element vorhanden ist, können Sie die Eigenschaft verwenden, um es sowohl horizontal als auch vertikal auszurichtenmargin: auto. Angenommen, im Container befindet sich nur das Element Nummer 1, das einfach so ausgerichtet werden muss. Dazu verwenden wir den folgenden Stil:

.item-1 {
    margin: auto;
}

Dies reicht aus, um das Element zu zentrieren.


Artikel 1 zentriert auf dem Container

▍Flex-Eigenschaft und Auto-Wert


Bei der Entwicklung von Flexbox-Layouts können Sie die Eigenschaft für untergeordnete Elemente verwenden flex: auto. Was bedeutet dieses Design? Tatsache ist, dass wenn ein untergeordnetes Element eine Eigenschaft hat flex: auto, dies der Tatsache entspricht, dass dem Element ein Stil zugewiesen wird flex: 1 1 auto, der der folgenden Konstruktion ähnelt:

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

Hier ist , was MDN sagt dazu : „Die Dimensionen eines Elements bestimmt nach seinen Eigenschaften widthund height, aber das Element kann gestreckt werden, zusätzlichen freien Speicherplatz in den Flex - Containern zur Verfügung Aufnahme. Ein Element kann und wird auf seine Mindestgröße komprimiert, um in einen Container zu passen. Dies ähnelt dem Einstellstil flex: 1 1 auto. “

Mit anderen Worten, die Größe des Elements mit der Eigenschaft flex: autowird basierend auf seiner Breite und Höhe festgelegt. Dieses Element kann sich jedoch dehnen oder zusammenziehen, je nachdem, wie viel Platz im Container zur Verfügung steht. Ich wusste nichts davon, bis ich anfing, nach diesem Artikel zu suchen.

Betrachten Sie wie üblich ein Beispiel.

Hier ist das Markup:

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

Hier sind die Stile:

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

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

.item-1 {
    flex: auto;
}

Und hier ist das Ergebnis.


Verwenden von flex: auto

Hier ist eine funktionierende Version dieses Beispiels.

Rasterlayouts und automatischer Wert


▍Verwenden Sie auto, um die Spalten anzupassen



Verwenden der Rastervorlagenspalten: auto 1fr 1fr style

Beim Entwickeln von Rasterlayouts können Sie den Wertautobeim Einrichten der Spalten verwenden. Dies bedeutet, dass die Breite der Spalten von der Größe ihres Inhalts abhängt. Folgendes meine ich:

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

▍Gitterlayouts und Verwendung des automatischen Werts zum Festlegen von Feldern


Bei Verwendung von Rasterlayouts kann der Wert autozum Anpassen der Elementfelder verwendet werden. Dies wird durchgeführt, um ähnliche Ergebnisse wie bei Verwendung autoin Flexbox-Layouts zu erzielen . Wenn wir mit einem Rasterlayout arbeiten und eines der Rasterelemente beispielsweise einen Stil hat margin-left: auto, wird es auf die rechte Seite des Layouts verschoben und seine Breite wird basierend auf der Größe seines Inhalts ausgewählt.

Betrachten Sie das folgende Beispiel.


Rasterlayout

Die Breite eines Elements mussItem 1von seinem Inhalt und nicht vom verfügbaren Rasterplatz abhängen. Dazu können wir den folgenden Stil verwenden:

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

Hier ist das Ergebnis der Anwendung dieses Stils.


Die Breite eines Elements hängt von seinem Inhalt ab.

▍RTL-Layouts


Es ist erwähnenswert, dass die Verwendung von Eigenschaften margin-left: autooder margin-right: autosich gut für LTR-Layouts (für Layouts, in denen sich der Inhalt von links nach rechts befindet) zeigt, zum Beispiel für diejenigen, die zum Anzeigen von in Englisch geschriebenen Texten verwendet werden. Beachten Sie jedoch, dass diese Bedeutungen auf mehrsprachigen Websites umgekehrt sind. Noch besser, und ich würde empfehlen, genau das zu tun, indem Sie Flexbox- oder Grid-Eigenschaften in solchen Modellen verwenden, und zwar in Fällen, in denen das Ziel mit ihrer Hilfe erreicht werden kann. Wenn dies mit Hilfe solcher Eigenschaften nicht erreicht werden kann, setzen Sie die Margin-Eigenschaften autonur als letzten Ausweg. Verwenden Sie stattdessen am besten die logischen Eigenschaften von CSS .

Überlauf-Eigenschaft


Wenn wir mit Elementen von Webseiten arbeiten, müssen wir die Größe des Inhalts kennen, den diese Elemente enthalten können. Wenn der Inhalt größer ist als das, was das Element enthalten kann, müssen Sie die Bildlaufleiste anzeigen, um mit solchen Inhalten arbeiten zu können.

Um dieses Problem zu lösen, können Sie versuchen, den folgenden Stil zu verwenden:

.element {
    overflow-y: scroll;
}

Bei diesem Ansatz wird möglicherweise auch dann eine Bildlaufleiste angezeigt, wenn das Element Inhalte anzeigt, deren Größe die Größe des Elements nicht überschreitet. Hier ist ein Beispiel.


Element, dem der Überlauf-y:

Bildlaufstil zugewiesen ist Im Chrome-Browser auf der Windows-Plattform wird immer die Bildlaufleiste angezeigt. Dies ist ein Beispiel für ein fehlerhaftes Element, das den Benutzer verwirren kann.

Wenn Sie anstelle dieses Werts verwenden,autokönnen Sie sicherstellen, dass die Bildlaufleiste nur in Fällen angezeigt wird, in denen die Höhe des Inhalts die Höhe des Containers überschreitet.

Auf MDN wird Folgendes angegeben: „Abhängig vom Benutzeragenten. Wenn der Inhalt in dem Elementbereich platziert wird, der dem Innenraum des Elements entspricht, sieht er genauso aus wie der im Modus angezeigte InhaltvisibleDadurch wird jedoch ein neuer Blockformatierungskontext erstellt. "Desktop-Browser zeigen Bildlaufleisten an, wenn der Inhalt größer als die Größe des Elements ist."

Eigenschaften zum Positionieren von Elementen


CSS-Eigenschaften , die für die Positionierung von Elementen, wie zum Beispiel top, right, bottomund leftwird der Wert gehalten auto. Worüber ich jetzt sprechen möchte, habe ich beim Schreiben dieses Artikels gelernt.

Betrachten Sie das folgende Layout.


Demo-Layout

Es gibt ein übergeordnetes Element mit einer benutzerdefinierten Eigenschaftpadding, die den Einzug definiert. Dieses Element hat ein anderes Element, ein Kind. Das untergeordnete Element ist absolut positioniert, aber seine Eigenschaften, die für die Positionierung verantwortlich sind, sind nicht konfiguriert. Hier sind die Stile:

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

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

Tatsache ist, dass in CSS jede Eigenschaft einen bestimmten Anfangswert hat (den Standardwert). Wenn Sie ein untergeordnetes Element untersuchen und sich die berechneten Stile ansehen, welchen Wert hat seine Eigenschaft left?


Untersuchen der berechneten Stile des untergeordneten Elements.

Der Standardwert für die Eigenschaftleftist dieser16px. Woher kam es, wenn wir ihn nicht einmal fragten? Der Grund dafür ist, dass die Eigenschaften eines absolut positionierten Elements mit seinem nächsten übergeordneten Element übereinstimmen, dessen Eigenschaft festgelegt istposition: relative. Das übergeordnete Element hat eine Eigenschaftpadding: 16px. Dadurch wird das untergeordnete Element 16 Pixel von der oberen und linken Seite des übergeordneten Elements entfernt platziert. Interessant, oder?

Jetzt haben Sie vielleicht eine Frage, was dies für uns bedeutet. Ich schlage vor, mich damit zu befassen.

Stellen Sie sich vor, ein Kind muss untergebracht werden100pxVom linken Rand des übergeordneten Elements aus können Sie beim Anzeigen der Seite auf kleinen Bildschirmen und auf großen Bildschirmen das Element dort platzieren, wo es sich beim Anwenden der Standardwerte befinden würde.

Hier ist ein Stil, der für kleine Bildschirme geeignet ist:

.wrapper {
    position: relative;
}

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

Wie kann ich den Eigenschaftswert zurücksetzen, leftwenn eine Seite auf großen Bildschirmen angezeigt wird? Darüber hinaus kann der Wert left: 0hier nicht verwendet werden, da dies dazu führt, dass das untergeordnete Element an den Rand des übergeordneten Elements gedrückt wird, wir es jedoch nicht benötigen. Schauen Sie sich das unten gezeigte Seitenlayout an. Er klärt meinen Standpunkt.


Das untergeordnete Element verhält sich nicht richtig.

Um die Positionierungseigenschaften des untergeordneten Elements zurückzusetzen, müssen Sie das Konstrukt verwendenleft: auto. Dies wird auf dem MDN wie folgt angegeben: „Ein Element wird horizontal platziert, als müsste es positioniert werden, wenn es ein statisches Element wäre.“

Dies bedeutet, dass beim Platzieren des Elements die Eigenschaft despaddingübergeordnetenElements berücksichtigtwird und sichergestellt wird, dass das untergeordnete Element nicht am Rand des übergeordneten Elements „haftet“.

Hier ist das CSS:

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

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

Gleiches gilt für eine Immobilie top. Die berechneten Werte der rightund der bottomstandardmäßig festgelegten Eigenschaften entsprechen jeweils der Breite und Höhe des Elements.

Hier ist ein Demo-Projekt für diesen Abschnitt.

Beispiele für die Verwendung des Auto-Werts


Ich muss sofort sagen, dass die hier gegebenen Beispiele nicht alle Bedeutungsmöglichkeiten abdecken auto, aber ich hoffe, dass das, was ich Ihnen sage, nützlich sein wird.

▍ Tooltip-Pfeil


Beim Erstellen von QuickInfos muss ein Pfeil auf das Objekt zeigen, auf das sich die QuickInfo bezieht. Diese Tipps sind also verständlicher. Für den Fall, dass wir ein Entwurfssystem entwickeln, müssen wir unterschiedliche Eingabeaufforderungszustände berücksichtigen. Eingabeaufforderungen werden beispielsweise mit einem Pfeil nach links und mit einem Pfeil nach rechts angezeigt.


Richtungspfeile in verschiedene Richtungen

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

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

Beachten Sie, dass ich die Eigenschaft verwendet habe left: auto, um die Eigenschaft left: -15pxin der ursprünglichen Implementierung zu überschreiben . Und so wissen Sie, wird dies ziemlich oft verwendet. Daher würde ich empfehlen, anstelle des obigen Ansatzes Folgendes zu verwenden:

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

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

Bei Verwendung eines Werts 100%vermeiden wir die Verwendung eines fest eingestellten Werts (Pfeilbreite), was zu einer Fehlfunktion des Systems führen kann, wenn sich die Pfeilgröße ändert. Diese Lösung ist besser für mögliche zukünftige Änderungen geeignet.

▍ Komponentenkarte


Vielleicht hat Ihr Projekt eine Komponentenkarte, auf der sich in der oberen linken Ecke eine Art Symbol befindet. Es kann eine dekorative Rolle spielen oder eine Schaltfläche zum Ausführen einer Aktion sein. Unabhängig von der Rolle des Symbols müssen die Komponenten so gestaltet sein, dass das Symbol sowohl in der oberen linken als auch in der oberen rechten Ecke positioniert werden kann. So sieht es aus.


Komponentenkarte mit einem Symbol, das sich in verschiedenen Winkeln befindet

Mithilfe einer Eigenschaft könnenleft: autoSie den Wert der in der Basisimplementierung angegebenen Eigenschaft einfach zurücksetzen. Hier ist das CSS:

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

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

▍Flexbox-Layouts und Wert der Auto-Margin-Eigenschaft


Flexbox-Layouts bieten Webentwicklern wirklich endlose Möglichkeiten. Durch die Kombination der Funktionen solcher Layouts mit Feldern, deren Wert zum Konfigurieren verwendet wird auto, können sehr leistungsfähige Layouts erstellt werden.

Betrachten Sie das folgende Beispiel.


Automatische Anpassung von Elementfeldern

Auf der rechten Seite befindet sich ein vertikaler Container mit dem Elementtitel, seiner Beschreibung und der Schaltfläche. Wir brauchen den Knopf an der rechten Seite des Containers.

Hier ist das Markup:

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

Hier sind die Stile:

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

    .item__action {
        margin-left: auto;
    }

Erledigt! Mit der Eigenschaft margin-left: autokönnen Sie die Schaltfläche in der oberen rechten Ecke des Elements platzieren. Noch schöner ist, dass wir logische CSS-Eigenschaften verwenden können, wenn wir eine mehrsprachige Site entwickeln. Das CSS wird ungefähr so ​​aussehen:

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

Wenn Sie mehr über das RTL-Styling erfahren möchten, finden Sie hier eine nützliche Ressource zu diesem Thema.

▍Gitterlayouts und Wert für den automatischen Rand


Durch Anpassen der Felder von Rasterelementen können Sie feste und prozentuale Werte festlegen und - Sie können den Wert verwenden auto. Die Bedeutung interessiert mich besonders auto. Schauen Sie sich das folgende Layout an.


Rasterlayout

Hier ist ein Fragment des Markups:

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

Hier sind die Stile:

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

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

Ich möchte die Beschriftungen, Elemente label, am linken Rand der Felder für die Eingabe von Daten (Elementen input) ausrichten . Dazu müssen Sie den folgenden Stil anwenden:

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

Das Anwenden dieses Stils führt zu dem in der folgenden Abbildung gezeigten Ergebnis.


Linksbündige Beschriftungen für die Dateneingabe

▍ Gestaltung von Modalfenstern



Modales Fenster

Wenn Sie an der Gestaltung von modalen Fenstern arbeiten, ist es wichtig zu berücksichtigen, dass der Inhalt, der im Fenster angezeigt werden muss, möglicherweise nicht vollständig in das Fenster passt. Damit das Fenster in dieser Situation normal funktioniert, können Sie den folgenden Stil verwenden:

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

Dank dieses Stils wird die Bildlaufleiste nur angezeigt, wenn der Inhalt des Fensters groß genug ist.

Zusammenfassung


In diesem Artikel haben wir die Funktionen zum Anwenden des Schlüsselworts autoin CSS untersucht. Wir hoffen, Sie finden es nützlich, was Sie heute lesen.

Liebe Leser! In welchen Situationen verwenden Sie Wert autoin CSS?

More articles:


All Articles