Detaillierte Erklärung des Unterschieds zwischen Flex und Inline-Flex in CSS

Detaillierte Erklärung des Unterschieds zwischen Flex und Inline-Flex in CSS

inline-flex ist dasselbe wie inline-block. Es ist ein display:flex-Container für interne Elemente und ein Inline-Block für externe Elemente.

Beschreibung des Unterschieds zwischen den beiden:

  • flex: Zeigt das Objekt als elastische Box an
  • inline-flex: Zeigt das Objekt als flexible Inline-Box auf Blockebene an.

Kurz gesagt: Wenn für den FlexBox-Container keine Breitengrößenbeschränkung festgelegt ist und die Anzeige als „Flex“ angegeben ist, füllt die Breite der FlexBox den übergeordneten Container, und wenn die Anzeige als „Inline-Flex“ angegeben ist, umschließt die Breite der FlexBox das untergeordnete Element, wie in der folgenden Abbildung dargestellt:

Der entsprechende Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>

  <Stil>

    /*Flex-Container*/
    .flex__container {
      Anzeige: Inline-Flex;
      Hintergrundfarbe: grau;
    }

    /*Flex-Unterelement */
    .flex__item {
      Breite: 50px;
      Höhe: 50px;

      Hintergrundfarbe: Aqua;
      Rand: 1px tief schwarz;
    }

  </Stil>
</Kopf>
<Text>

<!--Flex-Container-->
<div Klasse="flex__container">

  <!--Unterelement im Flex-Container-->
  <div Klasse="flex__item"></div>
  <div Klasse="flex__item"></div>
  <div Klasse="flex__item"></div>
  <div Klasse="flex__item"></div>
</div>

</body>
</html>

Damit ist dieser Artikel über die Unterschiede zwischen Flex und Inline-Flex in CSS abgeschlossen. Weitere Informationen zu CSS Flex und Inline-Flex finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Verwendung von MySQL-Triggern

>>:  Ein Artikel zeigt Ihnen, wie Sie den Watch-Listener von Vue verwenden

Artikel empfehlen

MySQL Serie 13 MySQL-Replikation

Inhaltsverzeichnis 1. Mit der MySQL-Replikation v...

SQL-Abfrage MySql-Datenbanktabellenname und -beschreibung Tabellenfeld- (Spalten-)Informationen

Im Folgenden finden Sie eine Einführung in die Ve...

Beispiel für eine Methode zum Festlegen von MySQL-Fremdschlüsseln

1. Methode zum Festlegen des Fremdschlüssels 1. U...

Docker-Fallanalyse: Erstellen eines Redis-Dienstes

Inhaltsverzeichnis 1 Mount-Verzeichnisse und Date...

MySQL fängt die SQL-Anweisung der String-Funktion ab

1. left(name,4) fängt die 4 Zeichen auf der linke...

Tutorial zum Erstellen einer persönlichen NextCloud-Netzwerkfestplatte mit Docker

Inhaltsverzeichnis 1. Einleitung 2. Bereitstellun...

Erstellen und Verwenden von Docker-Datenvolumencontainern

Ein Datenvolumencontainer ist ein Container, der ...

Flammenanimation mit CSS3 umgesetzt

Ergebnisse erzielen Implementierungscode html <...

So installieren Sie MySQL und MariaDB in Docker

Beziehung zwischen MySQL und MariaDB Das Datenban...

Wie besteht man die W3C-Validierung?

Neben der Festlegung von Vorschriften für verschi...

JavaScript-Farbbetrachter

In diesem Artikelbeispiel wird der spezifische Ja...

Geplantes Teilen von Skripten für MySQL-Datenbanksicherungen

BackUpMysql.sh-Skript #!/bin/bash PATH=/bin:/sbin...

MySQL-Fehler 1290 (HY000) Lösung

Ich habe lange mit einem Problem gekämpft und das...

Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen

Inhaltsverzeichnis Startoptionen Befehlszeile Lan...

Detaillierte Erläuterung der Prinzipien des tiefen und flachen Klonens von JavaScript-Arrays und Nicht-Array-Objekten

Inhaltsverzeichnis Was sind flaches und tiefes Kl...