Was sind die Vor- und Nachteile des Flex-Layouts?-CSS-Tutorial-php.cn

Was sind die Vor- und Nachteile des Flex-Layouts?

coldplay.xixi

Freigeben： 2021-01-28 18:00:51

Original

11462 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wenn Sie mehr über das Programmieren erfahren möchten, achten Sie bitte auf php Ausbildung

Spalte!

Was sind die Vor- und Nachteile des Flex-Layouts?

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!