title: 移动端自然布局 category: General

介绍

一套面向移动端的自然布局组件。

特性：

• 多栅格布局，支持自定义 BreakPoints
• 弹性的容器计算，完美适配各类屏幕（手表/手机/平板/桌面）
• 细化大/小布局，兼容各种移动端布局场景

布局细分为两种模式：

大布局

• <Page>: 页
• <Section>: 章
• <Block>: 区块
• <Header>: 序章
• <Footer>: 终章

小布局

• Row: 行
• Col: 列
• Cell: 单元格，主轴默认为 垂直方向的 flex 排版
• P: 段落

大布局模式

用于页面主体框架的布局，可支持根据屏幕宽度自定义栅格，并自动确定区块的列宽

代码：

<Page
  breakPoints={[
    {
      childWidth: 200,
      maxContentWidth: 200,
      numberOfColumns: 1,
    },
    {
      childWidth: 375,
      maxContentWidth: 375,
      numberOfColumns: 2,
    },
    {
      childWidth: 750,
      maxContentWidth: 750,
      numberOfColumns: 4,
    },
    {
      childWidth: 1125,
      maxContentWidth: 1125,
      numberOfColumns: 8,
    },
    {
      childWidth: Infinity,
      maxContentWidth: Infinity,
      numberOfColumns: 12,
    },
  ]}
>
  <Section>
    <Block span={6}>...</Block>
    <Block span={6}>...</Block>
  </Section>
</Page>

组件会根据页面宽度自动计算栅格数量和单个 Block 的列宽。单个 Block 的列宽计算逻辑为：

以屏幕宽度从 12 列模式收缩到 8 列为例， 6,4,2,4 布局, 子元素的列宽会经历如下调整:

小布局

用于对单个容器内部填充内容（如业务组件）进行行列精细化布局，实现等比、定宽等排列。

使用

1. 安装

npm install @alifd/mobile-pro-layout --save

2. 导入 Fusion Mobile 主题

引入 Fusion Mobile 的主题，此主题可以通过 Fusion 站点定制生成，或者使用默认主题：

import { Page, Section } from '@alife/mobile-theme-default';
// 导入一套默认主题变量
import '@alife/mobile-theme-default/index.css';

<Page>
  <Section>
    <Block>...</Block>
    <Block>...</Block>
    <Block>...</Block>
  </Section>
</Page>;

CSS 变量

| 名称 | 说明 | 默认值 | | :------------------------------ | :----------------------- | :----------- | | --layout-header-padding-lr | 序章左右内间距 | --s-3 | | --layout-header-padding-tb | 序章上下内间距 | --s-2 | | --layout-footer-padding-lr | 终章左右内间距 | --s-3 | | --layout-footer-padding-tb | 终章上下内间距 | --s-2 | | --layout-content-padding-lr | 内容左右内间距 | --s-3 | | --layout-content-padding-tb | 内容上下内间距 | --s-2 | | --layout-block-corner | 区块的圆角尺寸 | --corner-0 | | --layout-block-padding-lr | 区块左右内间距 | --s-3 | | --layout-block-padding-tb | 区块上下内间距 | --s-2 | | --layout-grid-small-gap | 小布局小尺寸间距 | --s-1 | | --layout-grid-medium-gap | 小布局中尺寸间距 | --s-2 | | --layout-grid-large-gap | 小布局大尺寸间距 | --s-3 | | --layout-p-spacing | 段落子元素左右间距 | --s-1 | | --layout-p-el-margin | 段落子元素上下间距 | --s-1 | | --layout-p-padding-small-size | 段落前(后)间距小号尺寸 | --s-2 | | --layout-p-padding-small-size | 段落前(后)后间距中号尺寸 | --s-3 | | --layout-p-padding-small-size | 段落前(后)后间距大号尺寸 | --s-4 |

在大布局模式下，如果需要支持较大屏幕， 则间距单位需要视情况决定采用 rpx 或 px 单位