Teilen Sie Beispiele für Flex-Layout und Grid-Layout

Ich habe Flex-Layout schon vor langer Zeit verwendet und fand es aufgrund der Kompatibilität nicht oft. Daher sollte man bei der Verwendung von Flex-Layout darauf achten, dass es relativ gut kompatibel ist mobile Endgeräte.

Flex-Layout ist ein Webseitenlayout

Containereigenschaften

1.display:flex/inline-flex
2.flex-direction 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。 
3.flex-wrap 决定换不换行，默认不换行
flex-wrap: nowrap | wrap | wrap-reverse;
4.flex-flow 是flex-direction和flex-wrap的简写方式
flex-flow: <flex-direction> || <flex-wrap>;
5.justify-content 决定了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
6.align-item 定义垂直位置，可以通过这个定义垂直居中
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
7.align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

• 
  

Das Rasterlayout ist sehr gut, aber die Kompatibilität ist jetzt nicht sehr gut. Ich habe mehrere Browser getestet, die Google, Firefox, Opera unterstützen, aber nicht Safari, IE10 oder niedriger, 360, QQ-Browser

1. Rastercontainer

1.display:grid/grid-inline

2.grid-template-columns und grid-template-rows Attribute können explizit eingestellt werden Die Spalten und Zeilen eines Rasters

fr-Einheiten können uns dabei helfen, eine Rasterspur zu erstellen, die Spalten hervorhebt. Es stellt den im Rastercontainer verfügbaren Platz dar (genau wie ein einheitenloser Wert in Flexbox)

grid-template-columns: 1fr 1fr 2fr

Die Funktion minmax() wird verwendet, um die minimale oder maximale Größe der Rasterspur zu erstellen. Die Funktion minmax() akzeptiert zwei Parameter: Der erste Parameter definiert den Minimalwert der Rasterspur und der zweite Parameter definiert den Maximalwert der Rasterspur. Jeder Längenwert wird akzeptiert, und auch automatische Werte werden akzeptiert. Mit dem Wert „Auto“ kann die Rasterspur je nach Größe des Inhalts gedehnt oder gestaucht werden.

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

„repeat()“ kann wiederholte Rasterspuren erstellen. Dies funktioniert gut zum Erstellen gleich großer Rasterelemente und mehrerer Rasterelemente. repeat() akzeptiert zwei Parameter: Der erste Parameter definiert, wie oft die Rasterspur wiederholt werden soll, und der zweite Parameter definiert die Größe jeder Spur.

Rastervorlagenzeilen: Wiederholung (3, 1fr);

Rastervorlagenspalten: 30px Wiederholung (3, 1fr) 30px;

2. Abstand

1.grid-column-gap Erstellt die Lücke zwischen Spalten

2.grid-row-gap Erstellt die Lücke zwischen Zeilen

3.grid -gap

Grid-Gap ist die Abkürzung für Grid-Row-Gap und Grid-Column-Gap. Wenn zwei Werte angegeben werden, dann dient der erste Wert zum Festlegen des Grid-Row-Gap-Werts, der zweite Wert legt den Wert von Grid-Gap fest. Spaltenlücke. Wenn nur ein Wert festgelegt ist, bedeutet dies, dass der Abstand zwischen Zeilen und Spalten gleich ist, dh die Werte von Grid-Row-Gap und Grid-Column-Gap sind gleich.

3. Gitterlinien

1. [Gitterzeilenanfang] [Gitterzeilenende] [Gitterspaltenende]

Rasterelemente können durch Rasterlinien positioniert werden. Rasterlinien stellen eigentlich den Anfang und das Ende einer Linie dar, mit den Rasterspalten oder -zeilen dazwischen. Jede Linie beginnt bei der Gitterspur, und die Gitterlinien des Gitters beginnen bei 1, und jede Gitterlinie erhöht sich schrittweise um 1

grid-row-start: 2;
grid-row-end: 3; 
grid-column-start: 2; 
grid-column-end: 3;

2.[Gitterzeile][Gitterspalte]

Grid-Row ist die Abkürzung für Grid-Row-Start und Grid-Row-End. Grid-Column ist die Abkürzung für Grid-Column-Start und Grid-Column-End. Wenn nur ein Wert angegeben wird, wird der Wert „grid-row-start(grid-column-start)“ angegeben; wenn zwei Werte angegeben werden, ist der erste Wert der Wert von „grid-row-start(grid-column-start“) ) und die beiden Werte sind die Werte von Grid-Row-End (Grid-Column-End) und müssen durch /

Grid-Row: 2;

grid-column : 3 / 4;

3 Dem Schlüsselwort span folgt eine Zahl, die angibt, wie viele Spalten oder Zeilen zusammengeführt werden sollen

grid-row: 1 / span 3;
grid-column: span 2;

4. Rasterbereich] gibt vier Werte an, Nr. Ein Wert entspricht dem Rasterzeilenanfang, der zweite Wert entspricht dem Rasterspaltenanfang, der dritte Wert entspricht dem Rasterzeilenende und der vierte Wert entspricht dem Rasterzeilenanfang Spaltenende

Rasterbereich: 2 / 2 / 3 / 3;

5. Benennung der Rasterlinie

Um einen Rasterliniennamen zuzuweisen, müssen Sie eckige Klammern verwenden [Gitterlinienname], gefolgt vom Raster. Die Größe der Spur.

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

grid-template-columns: [col -1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

Verwenden Sie die Funktion „repeat()“, um dem Raster denselben Namen zuzuweisen Linien.

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

Verwenden Sie die Funktion „repeat()“, um die Rasterlinien zu benennen. Dies führt auch dazu, dass mehrere Rasterlinien denselben Rasterliniennamen haben. Derselbe Gitterlinienname gibt die Position und den Namen der Gitterlinie an und fügt automatisch die entsprechende Nummer nach dem Gitterliniennamen hinzu, sodass der Gitterlinienname auch eine eindeutige Kennung ist

Verwenden Sie dasselbe Gitter Der Rastername legt die Position der Rasterelemente fest. Die Namen und Nummern der Rasterlinien müssen durch Leerzeichen getrennt werden

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

6. Benennung des Rasterbereichs

grid-template-areas Sie können Rasterelemente auch festlegen, indem Sie auf den Rasterbereich verweisen Name Position

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;

grid-template-columns: 1fr 200px;

7.grid-auto-flow Die Standardflussrichtung des Rasters ist Zeile. Sie können die Richtung des Rasterflusses über das Attribut „grid-auto-flow“ in Spalte ändern .

grid-auto-flow: Column

4.[Rasterelementausrichtung (Box-Ausrichtung)]

Das CSS-Box-Ausrichtungsmodul ergänzt Ausrichtung des Rasterelements entlang der Rasterzeilen- oder -spaltenachse.

[justify-items]

[justify-self]

Justify-items und justify-self geben die Ausrichtung von Rasterelementen entlang der Zeilenachse an align-self gibt die Ausrichtung von Rasterelementen entlang der Spaltenachse an.

　　justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受以下属性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

相关推荐：

Flex布局的可伸缩性详解

CSS3中关于Flex布局的详解

CSS使用Grid布局构建网站首页

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für Flex-Layout und Grid-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!