From c3a8b5c39f56f5bf841a05630efb48443a98062d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B1=95=E6=96=B0?= <zhanxin.lin@alipay.com>
Date: Wed, 10 Jun 2015 10:39:26 +0800
Subject: [PATCH] =?UTF-8?q?changed:=20=E4=BF=AE=E6=94=B9flex=E7=9A=84class?=
 =?UTF-8?q?=E4=B9=A6=E5=86=99=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/layout/demo/flex-align.md | 13 ++++-----
 components/layout/demo/flex.md       | 23 ++++++++-------
 components/layout/demo/sort.md       |  3 +-
 style/core/layouts.less              | 43 ++++++----------------------
 4 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/components/layout/demo/flex-align.md b/components/layout/demo/flex-align.md
index 6d92661399..69566b41dd 100644
--- a/components/layout/demo/flex-align.md
+++ b/components/layout/demo/flex-align.md
@@ -9,30 +9,29 @@ Flex 子元素垂直对齐
 
 
 ````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-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">
+<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-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">
+<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-50">2</div>
   <div class="col-4 hight-120">2</div>
   <div class="col-4 hight-80">2</div>
 </div>
-<p>底部对齐</p>
-
 ````
 
 
diff --git a/components/layout/demo/flex.md b/components/layout/demo/flex.md
index ca6555ee16..156f19a4e7 100644
--- a/components/layout/demo/flex.md
+++ b/components/layout/demo/flex.md
@@ -9,46 +9,47 @@ Flex 布局基础
 ---
 
 ````html
-
-<div class="row-flex start">
+<p>子元素居左排列</p>
+<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>
-<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>
-<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>
-<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>
-<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>
-<p>子元素分散对齐</p>
 
 ````
 
diff --git a/components/layout/demo/sort.md b/components/layout/demo/sort.md
index 5a3b416217..8a2a78e2a3 100644
--- a/components/layout/demo/sort.md
+++ b/components/layout/demo/sort.md
@@ -13,5 +13,4 @@
   <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>
-````
-
+````
\ No newline at end of file
diff --git a/style/core/layouts.less b/style/core/layouts.less
index 2e41814ed9..829b2f34f7 100644
--- a/style/core/layouts.less
+++ b/style/core/layouts.less
@@ -38,69 +38,42 @@
 }
 
 // x轴原点
-.row-flex.start,
-.row-flex.start.top,
-.row-flex.start.middle,
-.row-flex.start.bottom {
+.row-flex-start {
   justify-content: flex-start;
 }
 
 // x轴居中
-.row-flex.center,
-.row-flex.center.top,
-.row-flex.center.middle,
-.row-flex.center.bottom {
+.row-flex-center {
   justify-content: center;
 }
 
 // x轴反方向
-.row-flex.end,
-.row-flex.end.top,
-.row-flex.end.middle,
-.row-flex.end.bottom {
+.row-flex-end {
   justify-content: flex-end;
 }
 
 // x轴平分
-.row-flex.space-between,
-.row-flex.space-between.top,
-.row-flex.space-between.middle,
-.row-flex.space-between.bottom {
+.row-flex-space-between {
   justify-content: space-between;
 }
 
 // x轴有间隔地平分
-.row-flex.space-around,
-.row-flex.space-around.top,
-.row-flex.space-around.middle,
-.row-flex.space-around.bottom {
+.row-flex-space-around {
   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 {
+.row-flex-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 {
+.row-flex-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 {
+.row-flex-bottom {
  align-items: flex-end;
 }
 
-- 
GitLab