Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
b4301797
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b4301797
编写于
6月 10, 2015
作者:
展
展新
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update: 更新文档
上级
49a6715d
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
11 addition
and
8 deletion
+11
-8
components/layout/index.md
components/layout/index.md
+11
-8
未找到文件。
components/layout/index.md
浏览文件 @
b4301797
...
...
@@ -57,9 +57,9 @@
</div>
</div>
考虑到
Ant Design面临的业务多数的情况下需要在设计区域内解决大量信息收纳的问题,因此在12栅格系统的基础上,我们将整个设计区域建议按照24
等分的原则划分。
考虑到
Ant Design 面临的业务多数的情况下需要在设计区域内解决大量信息收纳的问题,因此在 12 栅格系统的基础上,我们将整个设计区域建议按照 24
等分的原则划分。
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多
4个,最少1
个。“盒子”在整个屏幕上占比见上图。设计部分急于盒子的单位定制盒子内部的排版规则以保证在视觉层面的舒适感。
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多
四个,最少一
个。“盒子”在整个屏幕上占比见上图。设计部分急于盒子的单位定制盒子内部的排版规则以保证在视觉层面的舒适感。
## 概述
...
...
@@ -74,12 +74,15 @@
我们的栅格化系统支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。
Flex 布局是基于24栅格来定义每一个“盒子”的宽度,但排版则不拘泥于栅格。
<style>
.row,
.row-flex {
.row {
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
}
.row-flex {
background: #F5F5F5;
}
.row div,
.row-flex div {
...
...
@@ -121,15 +124,15 @@
}
.hight-100 {
height: 100px;
height: 100px;
}
.hight-50 {
height: 50px;
height: 50px;
}
.hight-120 {
height: 120px;
height: 120px;
}
.hight-80 {
height: 80px;
height: 80px;
}
</style>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录