diff --git a/develop.md b/develop.md
index 75eebcb..a1d7b0d 100644
--- a/develop.md
+++ b/develop.md
@@ -18,7 +18,7 @@
-
+
diff --git a/src/space/index.js b/src/space/index.js
new file mode 100644
index 0000000..31097fc
--- /dev/null
+++ b/src/space/index.js
@@ -0,0 +1,55 @@
+/**
+ * {卡片组件}
+ * @author yutent
+ * @date 2023/03/06 15:17:25
+ */
+
+import { css, html, Component } from '@bd/core'
+
+class Space extends Component {
+ static styles = css`
+ :host {
+ display: block;
+ }
+ .container {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ width: 100%;
+ gap: 12px;
+ }
+ :host([vertical]) {
+ .container {
+ flex-direction: column;
+ }
+ }
+ :host([justify]) {
+ .container {
+ justify-content: space-between;
+ }
+ }
+
+ $gaps: (
+ 's': 4px,
+ 'm': 8px,
+ 'l': 12px,
+ 'xl': 16px,
+ 'xxl': 20px,
+ 'xxxl': 24px,
+ 'xxxxl': 28px
+ );
+ @each $k, $v in $gaps {
+ :host([gap='#{$k}']) {
+ .container {
+ gap: $v;
+ }
+ }
+ }
+ `
+
+ render() {
+ return html`
`
+ }
+}
+
+customElements.define('wc-space', Space)