changed: 修改flex的class书写方式

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>
-
 ````
 
 

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>
 
 ````
 

components/layout/demo/sort.md

@@ -14,4 +14,3 @@
   <div class="col-6 col-pull-18">.col-6 .col-pull-18</div>
 </div>
 ````
\ No newline at end of file
-

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;
 }