Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
428dae25
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,发现更多精彩内容 >>
提交
428dae25
编写于
6月 09, 2015
作者:
展
展新
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 增加 flex 布局的支持
上级
a5cb458b
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
214 addition
and
2 deletion
+214
-2
components/layout/demo/flex-align.md
components/layout/demo/flex-align.md
+40
-0
components/layout/demo/flex-order.md
components/layout/demo/flex-order.md
+23
-0
components/layout/demo/flex.md
components/layout/demo/flex.md
+57
-0
components/layout/index.md
components/layout/index.md
+20
-2
style/core/layouts.less
style/core/layouts.less
+74
-0
未找到文件。
components/layout/demo/flex-align.md
0 → 100644
浏览文件 @
428dae25
# Flex Align
-
order: 5
Flex 子元素垂直对齐
---
````
html
<div
class=
"row-flex center top"
>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
</div>
<p>
顶部对齐
</p>
<div
class=
"row-flex space-around middle"
>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
</div>
<p>
居中对齐
</p>
<div
class=
"row-flex space-between bottom"
>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
</div>
<p>
底部对齐
</p>
````
components/layout/demo/flex-order.md
0 → 100644
浏览文件 @
428dae25
# Flex Order
-
order: 6
通过 Flex 布局的 Order 来改变元素的排序
---
````
html
<div
class=
"row-flex"
>
<div
class=
"col-6 col-order-4"
>
1 col-order-4
</div>
<div
class=
"col-6 col-order-3"
>
2 col-order-3
</div>
<div
class=
"col-6 col-order-2"
>
3 col-order-2
</div>
<div
class=
"col-6 col-order-1"
>
4 col-order-1
</div>
</div>
````
components/layout/demo/flex.md
0 → 100644
浏览文件 @
428dae25
# Flex Basic
-
order: 4
Flex 布局基础
使用
`row-flex`
定义
`flex`
布局,其子元素根据不同的值
`start`
,
`center`
,
`end`
,
`space-between`
,
`space-around`
,分别定义其在父节点里面的排版方式。
---
````
html
<div
class=
"row-flex start"
>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
<p>
子元素居左排列
</p>
<div
class=
"row-flex center"
>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
<p>
子元素居中排列
</p>
<div
class=
"row-flex end"
>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
<p>
子元素居右排列
</p>
<div
class=
"row-flex space-between"
>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
<p>
子元素等宽排列
</p>
<div
class=
"row-flex space-around"
>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
<p>
子元素分散对齐
</p>
````
components/layout/index.md
浏览文件 @
428dae25
...
@@ -68,13 +68,19 @@
...
@@ -68,13 +68,19 @@
*
栅格系统中的列是指1到24的值来表示其跨越的范围。例如,三个等宽d的列可以使用
`.col-8`
来创建
*
栅格系统中的列是指1到24的值来表示其跨越的范围。例如,三个等宽d的列可以使用
`.col-8`
来创建
*
如果一个
`row`
中的
`col`
总和超过24,那么多余的
`col`
会作为一个整体另起一行排列
*
如果一个
`row`
中的
`col`
总和超过24,那么多余的
`col`
会作为一个整体另起一行排列
## Flex 布局
我们的栅格化系统支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。
<style>
<style>
.row {
.row,
.row-flex {
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%);
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 div {
.row div,
.row-flex div {
padding: 5px 0;
padding: 5px 0;
background: rgba(24, 115, 216, 0.7);
background: rgba(24, 115, 216, 0.7);
text-align: center;
text-align: center;
...
@@ -112,4 +118,16 @@
...
@@ -112,4 +118,16 @@
color: #999;
color: #999;
}
}
.hight-100 {
height: 100px;
}
.hight-50 {
height: 50px;
}
.hight-120 {
height: 120px;
}
.hight-80 {
height: 80px;
}
</style>
</style>
\ No newline at end of file
style/core/layouts.less
浏览文件 @
428dae25
...
@@ -37,5 +37,79 @@
...
@@ -37,5 +37,79 @@
}
}
}
}
// x轴原点
.row-flex.start,
.row-flex.start.top,
.row-flex.start.middle,
.row-flex.start.bottom {
justify-content: flex-start;
}
// x轴居中
.row-flex.center,
.row-flex.center.top,
.row-flex.center.middle,
.row-flex.center.bottom {
justify-content: center;
}
// x轴反方向
.row-flex.end,
.row-flex.end.top,
.row-flex.end.middle,
.row-flex.end.bottom {
justify-content: flex-end;
}
// x轴平分
.row-flex.space-between,
.row-flex.space-between.top,
.row-flex.space-between.middle,
.row-flex.space-between.bottom {
justify-content: space-between;
}
// x轴有间隔地平分
.row-flex.space-around,
.row-flex.space-around.top,
.row-flex.space-around.middle,
.row-flex.space-around.bottom {
justify-content: space-around;
}
// 顶部对齐
.row-flex.center.top,
.row-flex.start.top,
.row-flex.end.top,
.row-flex.space-between.top,
.row-flex.space-around.top {
align-items: flex-start;
}
// 居中对齐
.row-flex.center.middle,
.row-flex.start.middle,
.row-flex.end.middle,
.row-flex.space-between.middle,
.row-flex.space-around.middle {
align-items: center;
}
// 底部对齐
.row-flex.center.bottom,
.row-flex.start.bottom,
.row-flex.end.bottom,
.row-flex.space-between.bottom,
.row-flex.space-around.bottom {
align-items: flex-end;
}
.col {
position: relative;
display: block;
float: left;
flex: 0 0 auto;
}
.make-grid-columns();
.make-grid-columns();
.make-grid();
.make-grid();
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录