So verwenden Sie das flexible CSS-Boxmodell Flex im Layout

Anwendung von CSS Flexible Box Model Flex im Layout

Elementzentrierung

【1】Verwenden Sie die Hauptachsenausrichtung „justify-content“ und die Querachsenausrichtung „align-items“ im skalierbaren Container

 
 
DEMO
 

【2]Verwenden Sie margin:auto

 
 
DEMO
 

< on das skalierbare Element >Beide Enden ausrichten

 
 
DEMO
 
DEMO
 
DEMO
 
DEMO
 

Unten ausrichten

 
 
DEMO
 
DEMO
 
DEMO
 
DEMO
 

Eingabefeld-Schaltfläche

 
  按钮 

usw. Geteiltes Layout

 
 
1
 
2
 
3
 
4
 

Mehrspaltiges adaptives Layout

 
 
 
left
 
left
 
 
 
center
 
center
 
 
 
right
 
right
 
 

Hängendes Layout

 
 
左侧悬挂
 
主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容
 

Vollbild-Layout

 
 
 
top
 
 
 
 
left
 
 
 
 
right
 
 
 
 
 
bottom
 
 

php Chinesische Website

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das flexible CSS-Boxmodell Flex im Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!