Flex and Grid Layout

Flex

横向:

1
2
3
4
5
6
7
8
9
10
11
display: flex 声明使用flex box布局

flex-direction : row方向

flex-wrap 是否换行

justify-content 横排版

align-items: 竖排版

align-content: 间距

竖向:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
flex-direction : column 元素竖向

justify-content 竖排版 (与direction横向相反)

align-items: 横排版  (与direction横向相反)

其他:

快捷写法:

flex: 1 0 0px   

> 1 : flex-grow

> 0 : flex-shink

> 0px: flex-basis

flex-grow: 1  最后一个元素如果有空位会填满 (0.5则一半)

flex-shink: 0  元素不会随页面大小自行缩放

flex-basis: 0 无视width, 设置成grow具体数值

order: 2 改变到2位置(不推荐使用, 对阅读器用户不友好)

Grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

display: grid 定义

grid-template-columns: 1fr 1fr 1fr 1fr 定义横向 4个相同的块

grid-template-rows: 1fr 1fr 1fr 1fr 定义竖向 4个相同的块

grid-gap: 每个元素间的间距

grid-template-areas: 

'grid-item-1 grid-item-1 grid-item-1 grid-item-1'

'grid-item-2 grid-item-3 grid-item-3 grid-item-3'

'grid-item-2 grid-item-4 grid-item-4 grid-item-5'

'grid-item-2 grid-item-6 grid-item-6 grid-item-6';

每个元素需要定义area,如:

grid-area: grid-item-6;