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

Detaillierte Erklärung redundanter und doppelter Indizes in MySQL

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

Detaillierte Erklärung redundanter und doppelter Indizes in MySQL

Vue-Formular-Post-Anforderung kombiniert mit Servlet zur Realisierung der Datei-Upload-Funktion

Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung

Vue implementiert bidirektionale Datenbindung

Drei Möglichkeiten, das horizontale Div-Layout auf beiden Seiten auszurichten

Beispiele für Dateneinschränkungen basierend auf einer MySQL-Datenbank und Einführung in fünf Integritätseinschränkungen

XHTML drei Dokumenttypdeklarationen

Prinzipien und Beispiele für Lambda-Ausdrücke

Reines CSS, um eine horizontale Linienanimation unter dem Element (Hintergrundbild) zu erreichen

HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN

Artikel empfehlen

Abfrageprozess und Optimierungsmethode der (JOIN/ORDER BY)-Anweisung in MySQL

Implementierung der MySQL GRANT-Benutzerautorisierung

Der beste Weg, um den 1px-Rand auf Mobilgeräten zu lösen (empfohlen)

Mobile Frontend-Anpassungslösung (Zusammenfassung)

CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts

JavaScript-Selektorfunktionen querySelector und querySelectorAll

Flexibles CSS-Layout FLEX, Medienabfrage und Implementierung von mobilen Klickereignissen

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

So erhalten Sie den Maximal- oder Minimalwert einer Zeile in SQL

Zusammenfassung einiger Tipps zum Umgehen der Node.js-Codeausführung

Zusammenfassung gängiger Toolbeispiele in MySQL (empfohlen)

Ein Tutorial für Anfänger zur Installation und Anmeldung bei mysql-8.0.19-winx64 (unbedingt für Anfänger lesen)

Fügen Sie beim Schreiben von HTML-Links immer Schrägstriche zu Unterordnern hinzu, um HTTP-Anfragen zu reduzieren

So laden Sie die Kamera in HTML

Einführung in die Verwendung gängiger Dockerfile-Befehle