From c9ff68dd9ec712ea08db81c3d6d559e0d994836e Mon Sep 17 00:00:00 2001
From: Sabine Lim <thesabinelim@gmail.com>
Date: Mon, 8 May 2023 07:00:28 +1000
Subject: [PATCH] Flexbox docs

---
 docs/objects/Flexbox.md                   | 28 ++++++++++++++++++-----
 docs/objects/Flexbox/getSpacing.md        | 19 +++++++++++++++
 docs/objects/Flexbox/setFlexDirection.md  | 23 +++++++++++++++++++
 docs/objects/Flexbox/setJustifyContent.md | 23 +++++++++++++++++++
 docs/objects/Flexbox/setSpacing.md        | 23 +++++++++++++++++++
 5 files changed, 110 insertions(+), 6 deletions(-)
 create mode 100644 docs/objects/Flexbox/getSpacing.md
 create mode 100644 docs/objects/Flexbox/setFlexDirection.md
 create mode 100644 docs/objects/Flexbox/setJustifyContent.md
 create mode 100644 docs/objects/Flexbox/setSpacing.md

diff --git a/docs/objects/Flexbox.md b/docs/objects/Flexbox.md
index 81c2991..98e02c3 100644
--- a/docs/objects/Flexbox.md
+++ b/docs/objects/Flexbox.md
@@ -4,9 +4,25 @@ In addition to the methods inherited from Frame, Container, VisualObject and Obj
 
 |   |   |
 |---|---|
-|[setDirection](objects/BaseFrame/getOffset.md)|Sets the direction in which the children will be placed
-|[getDirection](objects/BaseFrame/getOffset.md)|Returns the direction
-|[setSpacing](objects/BaseFrame/setOffset.md)|Sets the space between objects
-|[getSpacing](objects/BaseFrame/setOffset.md)|Returns the space
-|[setJuustifyContent](objects/BaseFrame/getOffset.md)|Determines how the children are aligned along the main axis
-|[getJuustifyContent](objects/BaseFrame/getOffset.md)|Returns the justify content
+|[setSpacing](objects/Flexbox/setSpacing.md)|Sets the space between objects
+|[getSpacing](objects/Flexbox/getSpacing.md)|Returns the space between objects
+|[setFlexDirection](objects/Flexbox/setFlexDirection.md)|Sets the direction in which the children will be placed
+|[setJustifyContent](objects/Flexbox/setJustifyContent.md)|Determines how the children are aligned along the main axis
+
+### Example
+
+Here's an example of how to create a Flexbox object:
+
+```lua
+local main = basalt.createFrame()
+local flexbox = main:addFlexbox()
+  :setFlexDirection("column")
+  :setJustifyContent("space-between")
+  :setSpacing(5)
+```
+
+Alternatively, you can create a flexbox using an XML layout:
+
+```xml
+<flexbox flexDirection="column" justifyContent="space-between" spacing="5">
+```
diff --git a/docs/objects/Flexbox/getSpacing.md b/docs/objects/Flexbox/getSpacing.md
new file mode 100644
index 0000000..ed299e9
--- /dev/null
+++ b/docs/objects/Flexbox/getSpacing.md
@@ -0,0 +1,19 @@
+## getSpacing
+
+### Description
+
+Returns the space between objects
+
+### Returns
+
+1. `number` Number of pixels of spacing between each object
+
+### Usage
+
+* Creates a default flexbox and prints the default spacing.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+basalt.debug(flexbox:getSpacing())
+```
diff --git a/docs/objects/Flexbox/setFlexDirection.md b/docs/objects/Flexbox/setFlexDirection.md
new file mode 100644
index 0000000..d78115f
--- /dev/null
+++ b/docs/objects/Flexbox/setFlexDirection.md
@@ -0,0 +1,23 @@
+## setFlexDirection
+
+### Description
+
+Sets the direction in which the children will be placed
+
+### Parameters
+
+1. `string` One of ("row", "column") - default is row
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default flexbox and sets the flex direction to column.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setFlexDirection("column")
+```
diff --git a/docs/objects/Flexbox/setJustifyContent.md b/docs/objects/Flexbox/setJustifyContent.md
new file mode 100644
index 0000000..b9d8eb3
--- /dev/null
+++ b/docs/objects/Flexbox/setJustifyContent.md
@@ -0,0 +1,23 @@
+## setJustifyContent
+
+### Description
+
+Determines how the children are aligned along the main axis
+
+### Parameters
+
+1. `string` One of ("flex-start", "flex-end", "center", "space-between", "space-around") - default is flex-start. Works the same as the property of the same name in [CSS flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties)
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default flexbox and sets the justify content to space-between.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setJustifyContent("space-between")
+```
diff --git a/docs/objects/Flexbox/setSpacing.md b/docs/objects/Flexbox/setSpacing.md
new file mode 100644
index 0000000..ae55e88
--- /dev/null
+++ b/docs/objects/Flexbox/setSpacing.md
@@ -0,0 +1,23 @@
+## setSpacing
+
+### Description
+
+Sets the space between objects
+
+### Parameters
+
+1. `number` Number of pixels of spacing between each object - default is 1
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default flexbox and sets the spacing to 5 pixels.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setSpacing(5)
+```