Was ist elastisches Layout in CSS?-CSS-Tutorial-php.cn

Was ist elastisches Layout in CSS?

王林

Freigeben： 2020-11-16 11:08:03

Original

4102 Leute haben es durchsucht

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.

Was ist elastisches Layout in CSS?

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>

Nach dem Login kopieren

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!