Heim >Web-Frontend >CSS-Tutorial >Was sind die Vor- und Nachteile des Flex-Layouts?
Was sind die Vor- und Nachteile des Flex-Layouts?
- coldplay.xixiOriginal
- 2021-01-25 17:29:1211488Durchsuche
Die Vor- und Nachteile des Flex-Layouts sind: 1. Der Vorteil des Flex-Layouts besteht darin, dass es einfach zu verwenden ist und gemäß den Flex-Regeln leicht ein bestimmter Layout-Effekt erzielt werden kann. 2. Der Nachteil besteht darin, dass die Browserkompatibilität relativ ist schlecht und kann nur mit ie9 und höher kompatibel sein.
Die Betriebsumgebung dieses Artikels: Acer S40-51, HBuilder
CSS3 Flexible Box (Flexible Box oder Flexbox) ist eine Layoutmethode, die sicherstellt, dass Elemente ein angemessenes Verhalten aufweisen, wenn die Seite an verschiedene Bildschirmgrößen und Gerätetypen angepasst werden muss .Der Zweck der Einführung des Flexbox-Layoutmodells besteht darin, eine effizientere Möglichkeit zum Anordnen, Ausrichten und Zuweisen von leerem Raum zu Unterelementen in einem Container bereitzustellen. Vor- und Nachteile des von CSS3 eingeführten Flex-Layouts:
Der Vorteil besteht darin, dass es einfach zu verwenden ist und gemäß den Flex-Regeln leicht ein bestimmter Layout-Effekt erzielt werden kann.Der Nachteil ist: Die Browserkompatibilität ist relativ schlecht und kann nur mit ie9 und höher kompatibel sein.
Einführung in das von CSS3 eingeführte Flex-Layout:
- Die flexible Box besteht aus einem flexiblen Container (Flex-Container) und einem flexiblen Unterelement (Flex-Element). Ein Flex-Container wird als Flex-Container definiert, indem der Wert der Anzeigeeigenschaft auf Flex oder Inline-Flex gesetzt wird. Ein Flex-Container enthält ein oder mehrere untergeordnete Flex-Elemente. Hinweis: Außerhalb des flexiblen Containers und innerhalb der flexiblen untergeordneten Elemente werden die Elemente normal gerendert. Die Flex-Box definiert nur, wie die untergeordneten Flex-Elemente innerhalb des Flex-Containers angeordnet sind. Untergeordnete Flex-Elemente werden normalerweise in einer Reihe innerhalb der Flex-Box angezeigt. Standardmäßig gibt es nur eine Zeile pro Container.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>Der Effekt ist wie folgt:
Wenn Sie mehr über das Programmieren erfahren möchten, achten Sie bitte auf php Ausbildung
Spalte!
Das obige ist der detaillierte Inhalt vonWas sind die Vor- und Nachteile des Flex-Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!