Heim > Artikel > Web-Frontend > Was ist CSS3-Flexbox?

Was ist CSS3-Flexbox?

WBOYOriginal: 2021-12-22 11:57:571956Durchsuche

In CSS3 ist die flexible Box eine Layoutmethode, die es der Seite ermöglicht, sich an verschiedene Bildschirmgrößen und Gerätetypen anzupassen, wodurch eine effektivere Möglichkeit zur Platzzuweisung bereitgestellt wird. Das Anzeigeattribut kann zum Definieren der flexiblen Box verwendet werden Die Syntax lautet „display:flex“ oder „display:inline-flex“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist CSS3-Flexbox?

Flexible Box ist ein neuer Layoutmodus von CSS3.

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.

Flexible Box besteht aus Flex-Container und Flex-Artikel.

Ein flexibler Container wird als flexibler Container definiert, indem der Wert der Anzeigeeigenschaft auf Flex oder Inline-Flex gesetzt wird.

Ein flexibler Container enthält ein oder mehrere flexible Unterelemente.

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.

Flexible Unterelemente werden normalerweise in einer Zeile innerhalb der Flexbox angezeigt. Standardmäßig gibt es nur eine Zeile pro Container.

Das folgende Element zeigt das elastische Unterelement in einer Reihe von links nach rechts:

Das Beispiel sieht wie folgt aus:

<html>
<head>
<meta charset="utf-8"> 
<title>123</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>

Ausgabeergebnis:
Was ist CSS3-Flexbox?

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas ist CSS3-Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie sieht der CSS3-Offset nach links aus?Nächster Artikel：Wie sieht der CSS3-Offset nach links aus?

In Verbindung stehende Artikel

Mehr sehen