.png?w=3072&fmt=webp)
布局（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行即可。配置如下所示：
.png?w=3072&fmt=webp)
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