Sharing examples of Flex layout and Grid layout

I have used flex layout a long time ago and found it very useful. However, due to compatibility, I did not use it often. Therefore, when using flex layout, you should consider its compatibility. Flex has relatively high compatibility with mobile terminals.

flex layout is a web page layout

Container properties

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

• 
  

The grid layout is very good, but the compatibility is not very good now. I have tested several browsers, supporting Google, Firefox, Opera, but not safari, IE10 or below, 360, QQ browser

1. Grid container

1.display:grid/grid-inline

2.grid-template-columns and grid-template-rows attributes can be set explicitly The columns and rows of the grid

fr units can help us create a grid track that pops columns. It represents the space available in the grid container (just like a unitless value in Flexbox)

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

The minmax() function is used to create the minimum or maximum size of the grid track. The minmax() function accepts two parameters: the first parameter defines the minimum value of the grid orbit, and the second parameter defines the maximum value of the grid orbit. Any length value is accepted, and auto values ​​are also accepted. The auto value allows the grid track to stretch or squeeze based on the size of the content

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

repeat() can create repeated grid tracks. This works well for creating equal sized grid items and multiple grid items. repeat() accepts two parameters: the first parameter defines the number of times the grid track should be repeated, and the second parameter defines the size of each track.

grid-template-rows: repeat(3, 1fr);

grid-template-columns: 30px repeat(3, 1fr) 30px;

二. Spacing

1.grid-column-gap creates a gap between columns

2.grid-row-gap creates a gap between rows

3.grid -gap

grid-gap is the abbreviation of grid-row-gap and grid-column-gap. If it specifies two values, then the first value is to set grid-row-gap value, the second value sets the value of grid-column-gap. If only one value is set, it means that the spacing between rows and columns is equal, that is, the values ​​of grid-row-gap and grid-column-gap are the same.

3. Grid lines

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

Grid items can be positioned through grid lines. Grid lines actually represent the beginning and end of a line, with the grid columns or rows in between. Each line starts from the grid track, and the grid lines of the grid start from 1, and each grid line gradually increases by 1

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

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

Grid-row is the abbreviation of grid-row-start and grid-row-end. grid-column is the abbreviation of grid-column-start and grid-column-end. If only one value is provided, the grid-row-start(grid-column-start) value is specified; if two values ​​are provided, the first value is the value of grid-row-start(grid-column-start), and the The two values ​​​​are the values ​​of grid-row-end (grid-column-end), and they must be separated by /

grid-row: 2;

grid-column : 3 / 4;

3. The keyword span is followed by a number, indicating how many columns or rows to merge

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

4.[grid-area]Specify four values, the first one The value corresponds to grid-row-start, the second value corresponds to grid-column-start, the third value corresponds to grid-row-end, and the fourth value corresponds to grid-column-end

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

5. Grid line naming

To assign a grid line name, you must use square brackets [grid line name], followed by the grid track size value.

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

Use the repeat() function to assign the same name to the grid lines .

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

Use the repeat() function to name the grid lines, which also results in multiple grid lines having the same grid line name. The same grid line name specifies the position and name of the grid line, and will automatically add the corresponding number after the grid line name so that the grid line name is also a unique identifier

Use the same grid The grid name sets the position of the grid items. The names and numbers of the grid lines need to be separated by spaces

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

6. Grid area naming

grid-template-areas You can also set the grid project location by referencing the grid area name

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

grid-template-columns: 1fr 200px;

7.grid-auto-flow The default flow direction of the grid is row. You can change the direction of the grid flow to column through the grid-auto-flow attribute.

grid-auto-flow: column

4. Alignment

[Grid item alignment (Box Alignment)]

The CSS Box Alignment Module supplements the grid items along the grid row or column Axis alignment.

【justify-items】

【justify-self】

Justify-items and justify-self specify the alignment of grid items along the row axis; align-items and align-self specifies the alignment of grid items along the column axis.

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

The above is the detailed content of Sharing examples of Flex layout and Grid layout. For more information, please follow other related articles on the PHP Chinese website!