diff --git a/components/layout/demo/flex-align.md b/components/layout/demo/flex-align.md
index 0c20d1dd46..b7835e6b75 100644
--- a/components/layout/demo/flex-align.md
+++ b/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 (
-
{this.props.children}
- );
- }
-});
+const DemoBox = props => {props.children}
;
ReactDOM.render(
diff --git a/components/layout/demo/flex-order.md b/components/layout/demo/flex-order.md
index 4642142bca..e35e47e3b6 100644
--- a/components/layout/demo/flex-order.md
+++ b/components/layout/demo/flex-order.md
@@ -1,6 +1,6 @@
---
order: 6
-title: Flex排序
+title: Flex 排序
---
通过 Flex 布局的 Order 来改变元素的排序。
diff --git a/components/layout/demo/flex.md b/components/layout/demo/flex.md
index 55089979fe..34e9b550af 100644
--- a/components/layout/demo/flex.md
+++ b/components/layout/demo/flex.md
@@ -1,6 +1,6 @@
---
order: 4
-title: Flex布局
+title: Flex 布局
---
Flex 布局基础。
diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less
index aa9dc1efb5..5d189ede53 100644
--- a/site/common/styles/markdown.less
+++ b/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;
-}
\ No newline at end of file