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:
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
Tutorial zur Installation von Ubuntu 20.04 und NVIDIA-Treibern
Installieren Sie Ubuntu 20.04 Installieren Sie NV...
Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion
<br />Im Bereich des Netzwerkdesigns erfreut...
So verbessern Sie die Startgeschwindigkeit von Idea und beheben Probleme mit verstümmelten Zeichen im Tomcat-Protokoll
Inhaltsverzeichnis Vorwort Ideenstartgeschwindigk...
VMware Workstation ist nicht mit Device/Credential Guard kompatibel
Beim Installieren einer virtuellen Maschine wird ...
MySQL 5.7.17 Installations-Tutorial mit Lösungen für das Problem, dass der MySQL-Dienst nicht gestartet werden kann
Bei der .net-Entwicklung bin ich eher mit der SQL...
Verwendung von MySQL-Triggern
Trigger können dazu führen, dass vor oder nach de...
So installieren Sie Composer unter Linux
1. Laden Sie das Installationsskript - composer-s...
So installieren Sie Oracle Java 14 auf Ubuntu Linux
Vor Kurzem hat Oracle die öffentliche Verfügbarke...
Installieren Sie Jenkins mit Docker und lösen Sie das Problem des anfänglichen Plugin-Installationsfehlers
Nach der Installation von Jenkins schlägt der ers...
So konvertieren Sie ein JavaScript-Array in eine Baumstruktur
1. Nachfrage Das Backend stellt solche Daten bere...
Tiefgreifendes Verständnis der Rolle von Vuex
Inhaltsverzeichnis Überblick So teilen Sie Daten ...
So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop
Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...
Meine persönliche Zusammenfassung der Installationsschritte für die MySQL 5.7-Datenbank
1.mysql-5.7.19-winx64.zip (das ist die kostenlose...
Warum verwendet der MySQL-Datenbankindex den B+-Baum?
Bevor wir weiter analysieren, warum der MySQL-Dat...
MySQL-Anweisung zum Abrufen aller Daten oder Monate in einem angegebenen Zeitraum (ohne Festlegen gespeicherter Prozeduren oder Hinzufügen von Tabellen)
mysql ruft alle Daten oder Monate in einem Zeitra...