diff --git a/frameworks/bridge/declarative_frontend/jsview/js_flex_impl.cpp b/frameworks/bridge/declarative_frontend/jsview/js_flex_impl.cpp
index a5e4da66bda1171c957b5a38a9f611c4d57c59e2..d98a7c22df015517224dc3fff0d9714bf971ad35 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_flex_impl.cpp
+++ b/frameworks/bridge/declarative_frontend/jsview/js_flex_impl.cpp
@@ -85,6 +85,15 @@ void JSFlexImpl::CreateFlexComponent(const JSCallbackInfo& info)
     } else if (Container::GreatOrEqualAPIVersion(PlatformVersion::VERSION_TEN)) {
         FlexModel::GetInstance()->SetCrossAxisAlign(FlexAlign::FLEX_START);
     }
+    if (obj->HasProperty("space")) {
+        CalcDimension value;
+        JSRef<JSObject> spaceObj = JSRef<JSObject>::Cast(obj->GetProperty("space"));
+        JSRef<JSVal> mainSpaceVal = spaceObj->GetProperty("main");
+        if (!ParseLengthMetricsToDimension(mainSpaceVal, value) || value.IsNegative()) {
+            value.Reset();
+        }
+        FlexModel::GetInstance()->SetMainSpace(value);
+    }
 }
 
 void JSFlexImpl::CreateWrapComponent(const JSCallbackInfo& info, int32_t wrapVal)
@@ -133,6 +142,21 @@ void JSFlexImpl::CreateWrapComponent(const JSCallbackInfo& info, int32_t wrapVal
             FlexModel::GetInstance()->SetWrapAlignment(WRAP_TABLE[alignContent]);
         }
     }
+    if (obj->HasProperty("space")) {
+        CalcDimension mainValue;
+        CalcDimension crossValue;
+        JSRef<JSObject> spaceObj = JSRef<JSObject>::Cast(obj->GetProperty("space"));
+        JSRef<JSVal> mainSpaceVal = spaceObj->GetProperty("main");
+        JSRef<JSVal> crossSpaceVal = spaceObj->GetProperty("cross");
+        if (!ParseLengthMetricsToDimension(mainSpaceVal, mainValue) || mainValue.IsNegative()) {
+            mainValue.Reset();
+        }
+        if (!ParseLengthMetricsToDimension(crossSpaceVal, crossValue) || crossValue.IsNegative()) {
+            crossValue.Reset();
+        }
+        FlexModel::GetInstance()->SetMainSpace(mainValue);
+        FlexModel::GetInstance()->SetCrossSpace(crossValue);
+    }
 }
 
 void JSFlexImpl::JsFlexWidth(const JSCallbackInfo& info)
diff --git a/frameworks/bridge/declarative_frontend/jsview/models/flex_model_impl.h b/frameworks/bridge/declarative_frontend/jsview/models/flex_model_impl.h
index 8d751910f8e62211de1dd5ac2eed84e723acc8d4..93af83889437a9cc958e21178a84674e2358f348 100644
--- a/frameworks/bridge/declarative_frontend/jsview/models/flex_model_impl.h
+++ b/frameworks/bridge/declarative_frontend/jsview/models/flex_model_impl.h
@@ -46,6 +46,8 @@ public:
 
     void SetJustifyContent(int32_t value) override;
     void SetAlignContent(int32_t value) override;
+    void SetMainSpace(const std::optional<Dimension>& space) override {};
+    void SetCrossSpace(const std::optional<Dimension>& space) override {};
 };
 
 } // namespace OHOS::Ace::Framework
diff --git a/frameworks/core/components_ng/pattern/flex/flex_layout_property.h b/frameworks/core/components_ng/pattern/flex/flex_layout_property.h
index 8faf1a3a5f36baca09252b1b742f7440dd49f472..f85173a0cea09a3abc37ba268babe74df6794caa 100644
--- a/frameworks/core/components_ng/pattern/flex/flex_layout_property.h
+++ b/frameworks/core/components_ng/pattern/flex/flex_layout_property.h
@@ -55,6 +55,7 @@ public:
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(WrapLayoutAttribute, Alignment, WrapAlignment, PROPERTY_UPDATE_MEASURE);
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(WrapLayoutAttribute, MainAlignment, WrapAlignment, PROPERTY_UPDATE_MEASURE);
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(WrapLayoutAttribute, CrossAlignment, WrapAlignment, PROPERTY_UPDATE_MEASURE);
+    ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(WrapLayoutAttribute, CrossSpace, Dimension, PROPERTY_UPDATE_MEASURE);
 
 protected:
     void Clone(RefPtr<LayoutProperty> property) const override
diff --git a/frameworks/core/components_ng/pattern/flex/flex_layout_styles.h b/frameworks/core/components_ng/pattern/flex/flex_layout_styles.h
index cafff057f1799a80d8daf30e28296e4601f10494..bb817afb0ff296f964b1a20816d7233dda45dc12 100644
--- a/frameworks/core/components_ng/pattern/flex/flex_layout_styles.h
+++ b/frameworks/core/components_ng/pattern/flex/flex_layout_styles.h
@@ -32,6 +32,7 @@ struct WrapLayoutAttribute {
     ACE_DEFINE_PROPERTY_GROUP_ITEM(Alignment, WrapAlignment);
     ACE_DEFINE_PROPERTY_GROUP_ITEM(MainAlignment, WrapAlignment);
     ACE_DEFINE_PROPERTY_GROUP_ITEM(CrossAlignment, WrapAlignment);
+    ACE_DEFINE_PROPERTY_GROUP_ITEM(CrossSpace, Dimension);
 };
 } // namespace OHOS::Ace::NG
 
diff --git a/frameworks/core/components_ng/pattern/flex/flex_model.h b/frameworks/core/components_ng/pattern/flex/flex_model.h
index cc9ad4275381db96a46ebbe41968aa9f21ff32d3..48b9d5dff0b47b7eef036046316f42f98fb0032d 100644
--- a/frameworks/core/components_ng/pattern/flex/flex_model.h
+++ b/frameworks/core/components_ng/pattern/flex/flex_model.h
@@ -22,6 +22,7 @@
 
 #include "base/utils/macros.h"
 #include "core/components/common/layout/constants.h"
+#include "frameworks/base/geometry/dimension.h"
 
 namespace OHOS::Ace {
 
@@ -70,6 +71,8 @@ public:
     virtual void SetJustifyContent(int32_t value) = 0;
 
     virtual void SetAlignContent(int32_t value) = 0;
+    virtual void SetMainSpace(const std::optional<Dimension>& space) = 0;
+    virtual void SetCrossSpace(const std::optional<Dimension>& space) = 0;
 
 private:
     static std::unique_ptr<FlexModel> instance_;
diff --git a/frameworks/core/components_ng/pattern/flex/flex_model_ng.cpp b/frameworks/core/components_ng/pattern/flex/flex_model_ng.cpp
index 47f9ac2a2c2ee2ed5b0bad5742fcb03de96a2ad7..8d87f80b9a00d738f09b8364748a5091d71cab12 100644
--- a/frameworks/core/components_ng/pattern/flex/flex_model_ng.cpp
+++ b/frameworks/core/components_ng/pattern/flex/flex_model_ng.cpp
@@ -290,4 +290,20 @@ int FlexModelNG::GetFlexAlignContent(FrameNode* frameNode)
     return static_cast<int>(value);
 }
 
+void FlexModelNG::SetMainSpace(const std::optional<Dimension>& space)
+{
+    CHECK_NULL_VOID(space);
+    if (GreatOrEqual(space->Value(), 0.0)) {
+        ACE_UPDATE_LAYOUT_PROPERTY(FlexLayoutProperty, Space, space.value());
+    }
+}
+
+void FlexModelNG::SetCrossSpace(const std::optional<Dimension>& space)
+{
+    CHECK_NULL_VOID(space);
+    if (GreatOrEqual(space->Value(), 0.0)) {
+        ACE_UPDATE_LAYOUT_PROPERTY(FlexLayoutProperty, CrossSpace, space.value());
+    }
+}
+
 } // namespace OHOS::Ace::NG
diff --git a/frameworks/core/components_ng/pattern/flex/flex_model_ng.h b/frameworks/core/components_ng/pattern/flex/flex_model_ng.h
index 0597c3a5d09b6c758d1b75e35782adc29c351688..d88c7621518829543733d30937ae6120353cd7cb 100644
--- a/frameworks/core/components_ng/pattern/flex/flex_model_ng.h
+++ b/frameworks/core/components_ng/pattern/flex/flex_model_ng.h
@@ -38,6 +38,8 @@ public:
 
     void SetAlignItems(int32_t value) override;
     void SetWrapAlignment(WrapAlignment value) override;
+    void SetMainSpace(const std::optional<Dimension>& space) override;
+    void SetCrossSpace(const std::optional<Dimension>& space) override;
 
     void SetHasHeight() override {};
     void SetHasWidth() override {};
diff --git a/frameworks/core/components_ng/pattern/flex/wrap_layout_algorithm.cpp b/frameworks/core/components_ng/pattern/flex/wrap_layout_algorithm.cpp
index 4f023abef4b3ea11718d9880cfdce41c2bff7d1c..de50338d6c9644a4a95a92ba070cf8eba0182511 100644
--- a/frameworks/core/components_ng/pattern/flex/wrap_layout_algorithm.cpp
+++ b/frameworks/core/components_ng/pattern/flex/wrap_layout_algorithm.cpp
@@ -71,6 +71,8 @@ void WrapLayoutAlgorithm::Measure(LayoutWrapper* layoutWrapper)
         HandleDialogStretch();
         return;
     }
+    spacing_ = flexProp->GetSpaceValue({});
+    contentSpace_ = flexProp->GetCrossSpaceValue({});
     auto spacing = static_cast<float>(spacing_.ConvertToPx());
     auto contentSpace = static_cast<float>(contentSpace_.ConvertToPx());
     float currentMainLength = 0.0f;