From 428dae25eff26dc4460401f3b12607fb75689f17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B1=95=E6=96=B0?= Date: Tue, 9 Jun 2015 22:19:35 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20flex=20?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=9A=84=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/layout/demo/flex-align.md | 40 +++++++++++++++ components/layout/demo/flex-order.md | 23 +++++++++ components/layout/demo/flex.md | 57 +++++++++++++++++++++ components/layout/index.md | 22 ++++++++- style/core/layouts.less | 74 ++++++++++++++++++++++++++++ 5 files changed, 214 insertions(+), 2 deletions(-) create mode 100644 components/layout/demo/flex-align.md create mode 100644 components/layout/demo/flex-order.md create mode 100644 components/layout/demo/flex.md diff --git a/components/layout/demo/flex-align.md b/components/layout/demo/flex-align.md new file mode 100644 index 0000000000..6d92661399 --- /dev/null +++ b/components/layout/demo/flex-align.md @@ -0,0 +1,40 @@ +# Flex Align + +- order: 5 + +Flex 子元素垂直对齐 + + +--- + + +````html +
+
2
+
2
+
2
+
2
+
+

顶部对齐

+ +
+
2
+
2
+
2
+
2
+
+

居中对齐

+ +
+
2
+
2
+
2
+
2
+
+

底部对齐

+ +```` + + + + diff --git a/components/layout/demo/flex-order.md b/components/layout/demo/flex-order.md new file mode 100644 index 0000000000..e591193331 --- /dev/null +++ b/components/layout/demo/flex-order.md @@ -0,0 +1,23 @@ +# Flex Order + +- order: 6 + +通过 Flex 布局的 Order 来改变元素的排序 + + +--- + + +````html +
+
1 col-order-4
+
2 col-order-3
+
3 col-order-2
+
4 col-order-1
+
+ +```` + + + + diff --git a/components/layout/demo/flex.md b/components/layout/demo/flex.md new file mode 100644 index 0000000000..ca6555ee16 --- /dev/null +++ b/components/layout/demo/flex.md @@ -0,0 +1,57 @@ +# Flex Basic + +- order: 4 + +Flex 布局基础 + +使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。 + +--- + +````html + +
+
2
+
2
+
2
+
2
+
+

子元素居左排列

+ +
+
2
+
2
+
2
+
2
+
+

子元素居中排列

+ +
+
2
+
2
+
2
+
2
+
+

子元素居右排列

+ +
+
2
+
2
+
2
+
2
+
+

子元素等宽排列

+ +
+
2
+
2
+
2
+
2
+
+

子元素分散对齐

+ +```` + + + + diff --git a/components/layout/index.md b/components/layout/index.md index 563a07c937..ff186f0103 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -68,13 +68,19 @@ * 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽d的列可以使用`.col-8`来创建 * 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列 +## Flex 布局 + +我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 + \ No newline at end of file diff --git a/style/core/layouts.less b/style/core/layouts.less index 21d65d12c0..2e41814ed9 100644 --- a/style/core/layouts.less +++ b/style/core/layouts.less @@ -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-co