Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
c3a8b5c3
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,发现更多精彩内容 >>
提交
c3a8b5c3
编写于
6月 10, 2015
作者:
展
展新
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
changed: 修改flex的class书写方式
上级
bf7d15a8
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
27 addition
and
55 deletion
+27
-55
components/layout/demo/flex-align.md
components/layout/demo/flex-align.md
+6
-7
components/layout/demo/flex.md
components/layout/demo/flex.md
+12
-11
components/layout/demo/sort.md
components/layout/demo/sort.md
+1
-2
style/core/layouts.less
style/core/layouts.less
+8
-35
未找到文件。
components/layout/demo/flex-align.md
浏览文件 @
c3a8b5c3
...
@@ -9,30 +9,29 @@ Flex 子元素垂直对齐
...
@@ -9,30 +9,29 @@ Flex 子元素垂直对齐
````
html
````
html
<div
class=
"row-flex center top"
>
<p>
顶部对齐
</p>
<div
class=
"row-flex row-flex-center row-flex-top"
>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
</div>
</div>
<p>
顶部对齐
</p>
<div
class=
"row-flex space-around middle"
>
<p>
居中对齐
</p>
<div
class=
"row-flex row-flex-space-around row-flex-middle"
>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
</div>
</div>
<p>
居中对齐
</p>
<div
class=
"row-flex space-between bottom"
>
<p>
底部对齐
</p>
<div
class=
"row-flex row-flex-space-between row-flex-bottom"
>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-100"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-50"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-120"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
<div
class=
"col-4 hight-80"
>
2
</div>
</div>
</div>
<p>
底部对齐
</p>
````
````
...
...
components/layout/demo/flex.md
浏览文件 @
c3a8b5c3
...
@@ -9,46 +9,47 @@ Flex 布局基础
...
@@ -9,46 +9,47 @@ Flex 布局基础
---
---
````
html
````
html
<p>
子元素居左排列
</p>
<div
class=
"row-flex start"
>
<div
class=
"row-flex
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
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
</div>
<p>
子元素居左排列
</p>
<div
class=
"row-flex center"
>
<hr
/>
<p>
子元素居中排列
</p>
<div
class=
"row-flex 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
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
</div>
<p>
子元素居中排列
</p>
<div
class=
"row-flex end"
>
<p>
子元素居右排列
</p>
<div
class=
"row-flex 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
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
</div>
<p>
子元素居右排列
</p>
<div
class=
"row-flex space-between"
>
<p>
子元素等宽排列
</p>
<div
class=
"row-flex 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
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
</div>
<p>
子元素等宽排列
</p>
<div
class=
"row-flex space-around"
>
<p>
子元素分散对齐
</p>
<div
class=
"row-flex 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
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
<div
class=
"col-4"
>
2
</div>
</div>
</div>
<p>
子元素分散对齐
</p>
````
````
...
...
components/layout/demo/sort.md
浏览文件 @
c3a8b5c3
...
@@ -13,5 +13,4 @@
...
@@ -13,5 +13,4 @@
<div
class=
"col-18 col-push-6"
>
.col-18 .col-push-6
</div>
<div
class=
"col-18 col-push-6"
>
.col-18 .col-push-6
</div>
<div
class=
"col-6 col-pull-18"
>
.col-6 .col-pull-18
</div>
<div
class=
"col-6 col-pull-18"
>
.col-6 .col-pull-18
</div>
</div>
</div>
````
````
\ No newline at end of file
style/core/layouts.less
浏览文件 @
c3a8b5c3
...
@@ -38,69 +38,42 @@
...
@@ -38,69 +38,42 @@
}
}
// x轴原点
// x轴原点
.row-flex.start,
.row-flex-start {
.row-flex.start.top,
.row-flex.start.middle,
.row-flex.start.bottom {
justify-content: flex-start;
justify-content: flex-start;
}
}
// x轴居中
// x轴居中
.row-flex.center,
.row-flex-center {
.row-flex.center.top,
.row-flex.center.middle,
.row-flex.center.bottom {
justify-content: center;
justify-content: center;
}
}
// x轴反方向
// x轴反方向
.row-flex.end,
.row-flex-end {
.row-flex.end.top,
.row-flex.end.middle,
.row-flex.end.bottom {
justify-content: flex-end;
justify-content: flex-end;
}
}
// x轴平分
// x轴平分
.row-flex.space-between,
.row-flex-space-between {
.row-flex.space-between.top,
.row-flex.space-between.middle,
.row-flex.space-between.bottom {
justify-content: space-between;
justify-content: space-between;
}
}
// x轴有间隔地平分
// x轴有间隔地平分
.row-flex.space-around,
.row-flex-space-around {
.row-flex.space-around.top,
.row-flex.space-around.middle,
.row-flex.space-around.bottom {
justify-content: space-around;
justify-content: space-around;
}
}
// 顶部对齐
// 顶部对齐
.row-flex.center.top,
.row-flex-top {
.row-flex.start.top,
.row-flex.end.top,
.row-flex.space-between.top,
.row-flex.space-around.top {
align-items: flex-start;
align-items: flex-start;
}
}
// 居中对齐
// 居中对齐
.row-flex.center.middle,
.row-flex-middle {
.row-flex.start.middle,
.row-flex.end.middle,
.row-flex.space-between.middle,
.row-flex.space-around.middle {
align-items: center;
align-items: center;
}
}
// 底部对齐
// 底部对齐
.row-flex.center.bottom,
.row-flex-bottom {
.row-flex.start.bottom,
.row-flex.end.bottom,
.row-flex.space-between.bottom,
.row-flex.space-around.bottom {
align-items: flex-end;
align-items: flex-end;
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录