From 35fb3b2c49139db1ab46b91958f090ee96a57a60 Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Tue, 12 Mar 2024 11:31:46 -0700
Subject: [PATCH] Add flex wrap documentation (#1604)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1604

tsia

Reviewed By: yungsters

Differential Revision: D54782530

fbshipit-source-id: ae613b070557050646a28392e4cadebdb06f9b11
---
 website-next/docs/examples/flex-wrap.mdx | 28 ++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/website-next/docs/examples/flex-wrap.mdx b/website-next/docs/examples/flex-wrap.mdx
index 1b234677..96a728a7 100644
--- a/website-next/docs/examples/flex-wrap.mdx
+++ b/website-next/docs/examples/flex-wrap.mdx
@@ -2,4 +2,32 @@
 sidebar_position: 7
 ---
 
+import Playground from '@site/src/components/Playground';
+
 # Flex Wrap
+
+The `flex wrap` property is set on containers and controls what happens when
+children overflow the size of the container along the main axis. By default
+children are forced into a single line (which can shrink nodes). When wrapping lines [`align content`](/docs/examples/align-content) can be used to specify how the
+lines are placed in the container.
+
+**No wrap (default)**: No wrapping and children might shrink as a result.
+
+**Wrap**: Nodes are wrapped into multiple lines along the main axis if needed.
+
+**Wrap reverse**: Behaves the same as `wrap` but the order of the lines is reversed.
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 250,
+      height: 250,
+      padding: 10,
+      flexWrap: 'wrap'
+    }}>
+    <Node style={{margin: 5, height: 50, width: 50}} />
+    <Node style={{margin: 5, height: 50, width: 50}} />
+    <Node style={{margin: 5, height: 50, width: 50}} />
+    <Node style={{margin: 5, height: 50, width: 50}} />
+  </Node>
+</Layout>`} />