Partage d'exemples de disposition Flex et de disposition Grille

J'ai utilisé la disposition flex il y a longtemps et je l'ai trouvé très utile. Cependant, en raison de la compatibilité, je ne l'ai pas souvent utilisé. Par conséquent, lorsque vous utilisez la disposition flex, vous devez considérer sa compatibilité avec Flex. terminaux mobiles.

La mise en page flexible est une mise en page Web

Propriétés du conteneur

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（默认值）：轴线占满整个交叉轴。

• 
  

La disposition de la grille est très bonne, mais la compatibilité n'est pas très bonne maintenant. J'ai testé plusieurs navigateurs, prenant en charge Google, Firefox, Opera, mais pas Safari, IE10 ou inférieur, 360, navigateur QQ

1. Conteneur de grille

1.display:grid/grid-inline

2.grid-template-columns et grid-template-rows les attributs peuvent être explicites les colonnes et les lignes d'une grille

fr les unités peuvent nous aider à créer une piste de grille qui fait apparaître les colonnes. Il représente l'espace disponible dans le conteneur de grille (tout comme une valeur sans unité dans Flexbox)

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

La fonction minmax() est utilisée pour créer la taille minimale ou maximale de la piste de grille. La fonction minmax() accepte deux paramètres : le premier paramètre définit la valeur minimale de la piste de grille et le deuxième paramètre définit la valeur maximale de la piste de grille. Toute valeur de longueur est acceptée et les valeurs automatiques sont également acceptées. La valeur automatique permet à la piste de grille de s'étirer ou de se rétrécir en fonction de la taille du contenu

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

répéter() peut créer des pistes de grille répétées. Cela fonctionne bien pour créer des éléments de grille de taille égale et plusieurs éléments de grille. Repeat() accepte deux paramètres : le premier paramètre définit le nombre de fois que la piste de la grille doit être répétée et le deuxième paramètre définit la taille de chaque piste.

grille-modèle-lignes : répéter(3, 1fr);

grille-modèle-colonnes : 30px répéter(3, 1fr) 30px;

2. 🎜>

1.grid-column-gap crée l'espace entre les colonnes

2.grid-row-gap crée l'espace entre les lignes

3.grid -gap

grid-gap est l'abréviation de grid-row-gap et grid-column-gap S'il spécifie deux valeurs, alors la première valeur consiste à définir la valeur de grid-row-gap, la deuxième valeur définit la valeur de grid-gap. espacement des colonnes. Si une seule valeur est définie, cela signifie que l'espacement entre les lignes et les colonnes est égal, c'est-à-dire que les valeurs de grid-row-gap et grid-column-gap sont les mêmes.

3. Lignes de quadrillage

1. [grid-row-start] [grid-row-end] [grid-column-start] [grid-column-end]

Les éléments de la grille peuvent être positionnés à travers les lignes de la grille. Les lignes de grille représentent en fait le début et la fin d'une ligne, avec les colonnes ou les lignes de la grille entre les deux. Chaque ligne commence à partir de la piste de la grille, et les lignes de la grille commencent à 1, et chaque ligne de grille augmente progressivement de 1

2.[grid-row][grid-column]

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

Grid-row est l'abréviation de Grid-row-start et Grid-row-end. grille-colonne est l'abréviation de grille-colonne-début et grille-colonne-fin. Si une seule valeur est fournie, la valeur grid-row-start(grid-column-start) est spécifiée ; si deux valeurs sont fournies, la première valeur est la valeur de grid-row-start(grid-column-start) ; ), et les deux valeurs​​sont les valeurs de grid-row-end (grid-column-end), et elles doivent être séparées par /

grid-row: 2; 🎜>

grille-colonne : 3 / 4;

3. Le mot-clé span est suivi d'un nombre, indiquant le nombre de colonnes ou de lignes à fusionner

4 [. Grid-area] spécifie quatre valeurs, non. Une valeur correspond à Grid-row-Start, la deuxième valeur correspond à Grid-Column-Start, la troisième valeur correspond à Grid-ROW-End et la quatrième valeur correspond à Grid-Area. column-end

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

grid- area: 2/2/3/3;

5. Nom de la ligne de grille

Pour attribuer un nom de ligne de grille, vous devez utiliser des crochets [nom de la ligne de grille], suivi de la grille La taille de la piste.

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];

Utilisez la fonction repeat() pour attribuer le même nom à la grille lignes.

Utilisez la fonction repeat() pour nommer les lignes de grille, ce qui entraîne également que plusieurs lignes de grille aient le même nom de ligne de grille. Le même nom de ligne de quadrillage spécifie la position et le nom de la ligne de quadrillage, et ajoutera automatiquement le numéro correspondant après le nom de la ligne de quadrillage, de sorte que le nom de la ligne de quadrillage soit également un identifiant unique

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

Utilisez la même grille Le Le nom de la grille définit la position des éléments de la grille. Les noms et numéros des lignes de grille doivent être séparés par des espaces

6. Dénomination de la zone de grille

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

grid-template-areas Vous pouvez également définir des éléments de grille en faisant référence à la zone de grille name Position

7.grid-auto-flow La direction du flux par défaut de la grille est la ligne. Vous pouvez changer la direction du flux de la grille en colonne via l'attribut grid-auto-flow. .

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

grid-template-columns: 1fr 200px;

grid-auto-flow : colonne

4. Alignement

[Alignement des éléments de la grille (Alignement des boîtes)]

Le module d'alignement des boîtes CSS complète. l'élément de grille Alignement le long de l'axe de la ligne ou de la colonne de la grille.

[justify-items]

[justify-self]

Justify-items et justification-self spécifient l'alignement des éléments de la grille le long de l'axe des lignes et align-items ; align-self spécifie l'alignement des éléments de la grille le long de l'axe de la colonne.

　　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布局构建网站首页

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!