12栅格系统
概述
100%
66.66%
33.33%
50%
50%
33.33%
33.33%
33.33%
25%
25%
25%
25%

需要在设计区域内解决大量信息收纳的问题,我们将整个设计建议区域按照12等分的原则进行划分。划分之后的信息区块我们称之为【盒子】。建议横向排列的盒子数量最多4个,最少一个。盒子在整个屏幕上占比如上图。设计部分基于盒子的单位定制盒子内部的排版规则,以保证视觉层面的舒适感。

基础栅格
从水平到堆叠排列
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
等分删格
5等分
1/5
1/5
1/5
1/5
1/5
7等分
1/7
1/7
1/7
1/7
1/7
1/7
1/7
8等分
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
区块间隔
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
栅格排序
col-3 | push-9
col-9 | pull-3
左右偏移
col-4
col-4 | offset-4
col-3 | offset-3
col-3 | offset-3
col-6 | offset-4
Flex布局
子元素向左排列
col-2
col-2
col-2
col-2
子元素向右排列
col-2
col-2
col-2
col-2
子元素居中排列
col-2
col-2
col-2
col-2
子元素等宽排列
col-2
col-2
col-2
col-2
子元素分散排列
col-2
col-2
col-2
col-2
Flex对齐
顶部对齐
col-2
col-2
col-2
col-2
底部对齐
col-2
col-2
col-2
col-2
居中对齐
col-2
col-2
col-2
col-2
  • 栅格
  • 概述
  • 基础栅格
  • 等分删格
  • 区块间隔
  • 栅格排序
  • 左右偏移
  • Flex对齐