fix layout demo style

components/layout/demo/flex-align.md

@@ -1,6 +1,6 @@
 ---
 order: 5
-title: Flex对齐
+title: Flex 对齐
 ---
 
 Flex 子元素垂直对齐。
@@ -8,15 +8,7 @@ Flex 子元素垂直对齐。
 ````jsx
 import { Row, Col } from 'antd';
 
-const DemoBox = React.createClass({
-  render() {
-    const { value } = this.props;
-    const className = `hight-${value}`;
-    return (
-      <p className={className}>{this.props.children}</p>
-    );
-  }
-});
+const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
 
 ReactDOM.render(
   <div>

components/layout/demo/flex-order.md

@@ -1,6 +1,6 @@
 ---
 order: 6
-title: Flex排序
+title: Flex 排序
 ---
 
 通过 Flex 布局的 Order 来改变元素的排序。

components/layout/demo/flex.md

@@ -1,6 +1,6 @@
 ---
 order: 4
-title: Flex布局
+title: Flex 布局
 ---
 
 Flex 布局基础。

site/common/styles/markdown.less

@@ -180,76 +180,78 @@
   font-size: 13px;
 }
 
-.markdown .demo-row,
-.code-box-demo .demo-row {
-    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%);
-    overflow: hidden;
-}
-.markdown .row-flex,
-.code-box-demo .row-flex {
-  background: #F5F5F5;
-}
-.markdown .row > div,
-.code-box-demo .row > div,
-.markdown .row-flex > div,
-.code-box-demo .row-flex > div {
-  padding: 5px 0;
-  text-align: center;
-  border-radius: 6px;
-  min-height: 30px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  color: #fff;
-}
-.code-box-demo .row > div:not(.gutter-row) {
-  background: #6AC2F5;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-.markdown .row .demo-col,
-.code-box-demo .row .demo-col {
-  text-align: center;
-  padding: 40px 0;
-  color: #fff;
-  font-size: 18px;
-  border: none;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.markdown .row .demo-col-1,
-.code-box-demo .row .demo-col-1 {
-  background: rgba(29, 128, 211, 0.7);
-}
-.markdown .row .demo-col-2,
-.code-box-demo .row .demo-col-2 {
-  background: rgba(29, 128, 211, 0.5);
-}
-.markdown .row .demo-col-3,
-.code-box-demo .row .demo-col-3{
-  background: rgba(255, 255, 255, 0.2);
-  color: #999;
-}
-.markdown .row .demo-col-4,
-.code-box-demo .row .demo-col-4 {
-  background: rgba(29, 128, 211, 0.6);
-}
-.markdown .row .demo-col-5,
-.code-box-demo .row .demo-col-5 {
-  background: rgba(255, 255, 255, 0.5);
-  color: #999;
-}
-.markdown .hight-100,
-.code-box-demo .hight-100 {
-  height: 100px;
-}
-.markdown .hight-50,
-.code-box-demo .hight-50 {
-  height: 50px;
-}
-.markdown .hight-120,
-.code-box-demo .hight-120 {
-  height: 120px;
+[id^="components-layout-demo-"] {
+  .markdown .demo-row,
+  .code-box-demo .demo-row {
+      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%);
+      overflow: hidden;
+  }
+  .markdown .row-flex,
+  .code-box-demo .row-flex {
+    background: #F5F5F5;
+  }
+  .markdown .row > div,
+  .code-box-demo .row > div,
+  .markdown .row-flex > div,
+  .code-box-demo .row-flex > div {
+    padding: 5px 0;
+    text-align: center;
+    border-radius: 6px;
+    min-height: 30px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    color: #fff;
+  }
+  .code-box-demo .row > div:not(.gutter-row) {
+    background: #6AC2F5;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .markdown .row .demo-col,
+  .code-box-demo .row .demo-col {
+    text-align: center;
+    padding: 40px 0;
+    color: #fff;
+    font-size: 18px;
+    border: none;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .markdown .row .demo-col-1,
+  .code-box-demo .row .demo-col-1 {
+    background: rgba(29, 128, 211, 0.7);
+  }
+  .markdown .row .demo-col-2,
+  .code-box-demo .row .demo-col-2 {
+    background: rgba(29, 128, 211, 0.5);
+  }
+  .markdown .row .demo-col-3,
+  .code-box-demo .row .demo-col-3{
+    background: rgba(255, 255, 255, 0.2);
+    color: #999;
+  }
+  .markdown .row .demo-col-4,
+  .code-box-demo .row .demo-col-4 {
+    background: rgba(29, 128, 211, 0.6);
+  }
+  .markdown .row .demo-col-5,
+  .code-box-demo .row .demo-col-5 {
+    background: rgba(255, 255, 255, 0.5);
+    color: #999;
+  }
+  .markdown .height-100,
+  .code-box-demo .height-100 {
+    height: 100px;
+  }
+  .markdown .height-50,
+  .code-box-demo .height-50 {
+    height: 50px;
+  }
+  .markdown .height-120,
+  .code-box-demo .height-120 {
+    height: 120px;
+  }
+  .markdown .height-80,
+  .code-box-demo .height-80 {
+    height: 80px;
+  }
 }
-.markdown .hight-80,
-.code-box-demo .hight-80 {
-  height: 80px;
-}