Heim > Artikel > Web-Frontend > Was ist elastisches Layout in CSS?

Was ist elastisches Layout in CSS?

王林Original: 2020-11-16 11:08:034058Durchsuche

Flexibles Layout in CSS ist eine Layoutmethode, die sicherstellt, dass sich Elemente angemessen verhalten, wenn die Seite an unterschiedliche Bildschirmgrößen und Gerätetypen angepasst werden muss. Der Zweck der Einführung des flexiblen Layoutmodells besteht darin, eine effizientere Möglichkeit zum Anordnen, Ausrichten und Zuweisen von Leerraum für die untergeordneten Elemente eines Containers bereitzustellen.

Einführung in das elastische Layout:

Flexible Box ist ein neuer Layoutmodus von CSS3.

(Lernvideo-Sharing: CSS-Video-Tutorial)

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.

Inhalt der flexiblen Box:

Die flexible Box besteht aus einem Flex-Behälter und einem 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.

Die folgenden Elemente zeigen die elastischen untergeordneten Elemente, die in einer Reihe von links nach rechts angezeigt werden.

<!DOCTYPE html>
<html>
<head>
<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>

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist elastisches Layout in CSS?. 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：Warum sollte CSS im Kopf platziert werden?Nächster Artikel：Warum sollte CSS im Kopf platziert werden?

In Verbindung stehende Artikel

Mehr sehen