布局(Flex vs Grid)

2分钟了解 Creght 的布局

Flex布局

1. 方向(Direction):水平、垂直

水平布局

垂直布局

2. 分布(Distribute):元素在主轴上的对齐方式

主轴:如果是水平布局,主轴为X轴;如果是垂直布局,主轴为Y轴;以下的示例以水平布局为例

起点排列(flex-start)

居中排列(flex-start)

终点排列(flex-end)

两端对齐(space-between):首个元素放置于起点,末尾元素放置于终点

均匀排列(space-around):每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍

均匀排列(space-evenly):每个元素之间的间隔相等

3. 对齐(Align):属性定义元素在交叉轴上如何对齐

主轴:如果是水平布局,主轴为X轴;如果是垂直布局,主轴为Y轴;以下的示例以水平布局为例,交叉轴就是Y轴方向上的对齐

起点排列(flex-start)

居中排列(flex-start)

终点排列(flex-end)

4. 换行(Wrap)

不换行(nowrap)

换行(wrap)

5 间隔(Gap)

没设置gap(gap=0)

gap=24

6 特别补充
当父容器设置为flex布局,子元素的宽高属性会多一个填充类型选项,
如果元素设置为1fr,则它们将等分剩余空间(如果有的话)。
如果一个元素设置为2fr,其他项目都为1fr,则前者占据的剩余空间将比其他项多一倍。

1fr

1fr

1fr

1fr

2fr

1fr

Grid 布局

可以用网格 布局 实现如下所示的布局

可以用网格布局 实现如下所示的布局

元素 1

元素 2

元素 3

元素 4

元素 5

元素 6

Grid参数说明

1. 列数(Columns):显示几列
2. 行数(Rows):显示几行
3. 间隔(Gap):格子之前的间隔
4. Grid布局下的子项-网格设置

示例的网格1:占位3列1行,在尺寸分组下,设置跨度(Span)设置项为:3列即可。配置如下所示:


示例的网格2:占位1列2行,在尺寸分组下,设置跨度(Span)设置项为:2行即可。配置如下所示:


5. Grid布局-高级参数说明(了解即可)

5.1 列数(Columns)auto:一般搭配子项固定宽度,父容器的宽度自适应的情况

5.2 宽度(Width):表示网格的宽度设置

* 最小(min):表示网格的宽度最小为50px;

* 固定:表示固定宽度

5.3 高度(Height):表示网格的高度设置

* 填充容器(Fill container)表示网格的高度填充容器的高度;

* 固定:表示固定高度;

* 适配内容:表示网格的高度为内容的高度

5.4 对齐(Align):整个内容区域在容器里面的水平位置(左中右)

5.5 排列顺序(AutoFlow):设置容器下的子容器排列顺序

先行后列

1

2

3

4

5

6

7

8

9

先列后行

1

2

3

4

5

6

7

8

9

先行后列紧密

1

2

3

4

5

6

7

8

9

先列后行紧密

1

2

3

4

5

6

7

8

9