2分钟了解 Creght 的布局
水平布局
垂直布局
主轴:如果是水平布局,主轴为X轴;如果是垂直布局,主轴为Y轴;以下的示例以水平布局为例
起点排列(flex-start)
居中排列(flex-start)
终点排列(flex-end)
两端对齐(space-between):首个元素放置于起点,末尾元素放置于终点
均匀排列(space-around):每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍
均匀排列(space-evenly):每个元素之间的间隔相等
主轴:如果是水平布局,主轴为X轴;如果是垂直布局,主轴为Y轴;以下的示例以水平布局为例,交叉轴就是Y轴方向上的对齐
起点排列(flex-start)
居中排列(flex-start)
终点排列(flex-end)
不换行(nowrap)
换行(wrap)
没设置gap(gap=0)
gap=24
1fr
1fr
1fr
1fr
2fr
1fr
示例的网格1:占位3列1行,在尺寸分组下,设置跨度(Span)设置项为:3列即可。配置如下所示:
示例的网格2:占位1列2行,在尺寸分组下,设置跨度(Span)设置项为:2行即可。配置如下所示:
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