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

Möglichkeiten zur Verbesserung der MongoDB-Leistung

Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen

Artikel

Anwendungsszenarien und Entwurfsmethoden für MySQL-Tabellen- und Datenbank-Sharding

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

Möglichkeiten zur Verbesserung der MongoDB-Leistung

Lösung für die Nichterreichbarkeit des Tencent Cloud Server Tomcat-Ports

Alibaba Cloud Nginx konfiguriert https, um ein Domänennamen-Zugriffsprojekt zu implementieren (grafisches Tutorial)

Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen

Anwendungsszenarien und Entwurfsmethoden für MySQL-Tabellen- und Datenbank-Sharding

Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe

Detaillierte Erläuterung der Methode zur Bestimmung des einzelnen Masterknotens von MySQL 5.7 MGR

Eine eingehende Analyse von MySQL erläutert die Verwendung und die Ergebnisse

Detaillierte Erläuterung der drei Möglichkeiten zum Konfigurieren virtueller Nginx-Hosts (basierend auf Ports)

Detailliertes Verständnis und vergleichende Analyse der Server Apache, Tomcat und Nginx

Artikel empfehlen

Tiefgreifendes Verständnis der sieben Kommunikationsmethoden von Vue-Komponenten

Detaillierte Erklärung des Unterschieds zwischen einem href=# und einem href=javascript:void(0)

So konfigurieren Sie https für Nginx in Docker

Umfassendes Verständnis der Node-Ereignisschleife

So installieren und implementieren Sie einen FTP-Image-Server unter Linux

Detaillierte Erklärung des Prinzips des js-Proxys

Detaillierte Erklärung der Datentypen und Schemaoptimierung in MySQL

Mysql-Lösung zur Verbesserung der Effizienz beim Kopieren großer Datentabellen

Beispiel für das Abhören des Vue-Routings zum dynamischen Laden derselben Seite

Tutorial zur Konfiguration des Nginx/Httpd-Reverseproxys für Tomcat

Zusammenfassung des Unterschieds zwischen der Verwendung von „from“ und „join“ zum Abfragen zweier Tabellen in MySQL

Tutorial zur kostenlosen Konfiguration der MySQL 5.7.19 Winx64-Installationsversion

JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion

HTML-Tags: Sub-Tag und Sup-Tag

Hexadezimale Farbcodes (vollständig)