diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7aedda8..72f89e9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -157,12 +157,12 @@ REF_LABEL=网站首页
 <a href="https://github.com/Alex-Programer" title="Alex">
   <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
 </a>
-<a href="https://github.com/expoli" title="expoli">
-  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
   <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
+<a href="https://github.com/expoli" title="expoli">
+  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
+</a>
 <a href="https://github.com/sjh42" title="42:p">
   <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
diff --git a/README.md b/README.md
index e8733d3..0099621 100644
--- a/README.md
+++ b/README.md
@@ -194,12 +194,12 @@ Quick Reference
 <a href="https://github.com/Alex-Programer" title="Alex">
   <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
 </a>
-<a href="https://github.com/expoli" title="expoli">
-  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
   <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
+<a href="https://github.com/expoli" title="expoli">
+  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
+</a>
 <a href="https://github.com/sjh42" title="42:p">
   <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
diff --git a/docs/flutter.md b/docs/flutter.md
index a9cd580..a57183a 100644
--- a/docs/flutter.md
+++ b/docs/flutter.md
@@ -413,6 +413,196 @@ SizedBox(
 ),
 ```
 
+基础布局
+---
+
+### Container
+
+在实际开发中，Container常常用于对一个组件进行包装修饰。
+
+```dart
+// 将Contianer大小固定为100 * 100， 背景色为蓝色。
+// 把Text包裹在Container中，并将其居中
+Container(
+  width: 100,
+  height: 100,
+  color: Colors.blue,
+  alignment: Alignment.center,
+  child: Text('Hello world'),
+),
+
+```
+
+### Column
+
+列布局(Column),可以将多个子组件沿着垂直的方向摆放(竖的摆放)
+
+```dart
+// 将container 和 button 摆放到同一列。
+Column(
+   children: [
+     Container(
+       width: 100,
+       height: 100,
+       color: Colors.blue,
+       alignment: Alignment.center,
+       child: Text('Hello world'),
+     ),
+     ElevatedButton(
+       onPressed: () {},
+       child: Text('Button'),
+     ),
+   ],
+),
+```
+
+### Row
+
+行布局(Row)，可以将多个组件沿水平的方向摆放。
+
+```dart
+// 在同一行摆放3个Button
+Row(
+  children: [
+    ElevatedButton(
+      onPressed: () {},
+      child: const Text('1'),
+    ),
+    ElevatedButton(
+      onPressed: () {},
+      child: const Text('2'),
+    ),
+    ElevatedButton(
+      onPressed: () {},
+      child: const Text('3'),
+    ),
+  ],
+),
+```
+
+### Wrap
+
+将子组件从左到右依次排列，当空间不足时自动换行。
+
+```dart
+// 显示多个Flutter 的logo并自动换行
+Wrap(
+  children: [
+    FlutterLogo(),
+    FlutterLogo(),
+    FlutterLogo(),
+    FlutterLogo(),
+    FlutterLogo(),  
+    FlutterLogo(),
+  ],
+),
+```
+
+### Stack
+
+Stack 可以将一多个子组件叠在一起显示。堆叠顺序按照children属性中的列表依次堆叠摆放，默认将子控件沿左上角对齐。
+需要控制子控件位置可以嵌套`Positoned`控件。
+
+```dart
+// 依次堆叠300*300的蓝色色块、200*200的黑色色块、
+// 100*100的黄色色块
+Stack(
+  children: [
+    Container(
+      height: 300,
+      width: 300,
+      color: Colors.blue,
+    ),
+    Container(
+      height: 200,
+      width: 200,
+      color: Colors.black,
+    ),
+    Container(
+      height: 100,
+      width: 100,
+      color: Colors.yellow,
+    ),
+  ],
+),
+```
+
+### Positioned
+<!--rehype:wrap-class=row-span-2-->
+若需要控制Stack中子控件的位置，则可以嵌套改控件。
+
+```dart
+Stack(
+  children: [
+    // 默认摆放在左上位置
+    Container(
+      height: 300,
+      width: 300,
+      color: Colors.blue,
+    ),
+    // 距离左边40个、距离上面40个逻辑像素的位置
+    Positioned(
+      left: 40,
+      top: 40,
+      child: Container(
+        height: 200,
+        width: 200,
+        color: Colors.black,
+      ),
+    ),
+    // 距离左边80个、距离上面80个逻辑像素的位置
+    Positioned(
+      left: 80,
+      top: 80,
+      child: Container(
+        height: 100,
+        width: 100,
+        color: Colors.yellow,
+      ),
+    ),
+  ],
+),
+```
+
+### Align
+
+Align组件用于决定子组件对齐方式
+
+```dart
+// 使用Align将Button 居中在Container中
+Container(
+  width: 100,
+  height: 100,
+  color: Colors.green,
+  child: Align(
+    alignment: Alignment.center,
+    child: ElevatedButton(
+      onPressed: () {}, 
+      child: Text('Center'),
+    ),
+  ),
+),
+```
+
+### Center
+
+Center 组件实际上继承于Align。用于专门剧中。
+
+```dart
+//与 Align中代码效果一致
+Container(
+  width: 100,
+  height: 100,
+  color: Colors.green,
+  child: Center(
+    child: ElevatedButton(
+      onPressed: () {}, 
+      child: Text('Center'),
+    ),
+  ),
+),
+```
+
 另见
 ---