Flexbox docs

Updated the flexbox documentation for the current flexbox implementation

docs/objects/Flexbox.md

@@ -1,14 +1,32 @@
-A Flexbox is a layout container that is designed to make it easier to create flexible and responsive UI designs. It allows you to arrange and align its children (elements) within it in a more efficient way.
+A Flexbox is a layout container designed to facilitate the creation of flexible and responsive UI designs. It allows you to efficiently arrange and align its child elements within it.
 
-In addition to the methods inherited from Frame, Container, VisualObject and Object, Flexbox has the following methods:
+The Flexbox Container is still a WIP and i will add more methods from the CSS Flexbox Implementation.
+
+In addition to the methods inherited from ScrollableFrame, Frame, Container, VisualObject and Object, Flexbox has the following methods:
 
 |   |   |
 |---|---|
-|[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
-|[setAlignItems](objects/Flexbox/setAlignItems.md)|Determines how the children are aligned along the off axis
+|[setSpacing](objects/Flexbox/setSpacing.md)|Defines the gap between child objects within the Flexbox
+|[getSpacing](objects/Flexbox/getSpacing.md)|Returns the current gap size between child objects
+|[setDirection](objects/Flexbox/setDirection.md)|Sets the direction for the arrangement of child objects (row/column)
+|[getDirection](objects/Flexbox/getDirection.md)|Returns the currently set arrangement direction of child objects
+|[setJustifyContent](objects/Flexbox/setJustifyContent.md)|Sets the alignment of child objects along the main axis (flex-start, center, flex-end, space-between, space-around, space-evenly)
+|[getJustifyContent](objects/Flexbox/getJustifyContent.md)|Returns the current alignment setting for child objects along the main axis
+|[setWrap](objects/Flexbox/setWrap.md)|Determines if child objects should wrap onto the next line when they run out of space
+|[getWrap](objects/Flexbox/getWrap.md)|Returns the current wrapping behavior for child objects
+|[updateLayout](objects/Flexbox/updateLayout.md)|Manually triggers a layout update for the Flexbox
+|[addBreak](objects/Flexbox/addBreak.md)|Introduces a line break within the Flexbox, forcing subsequent child objects to the next line
+
+Child objects added via the Flexbox have the following additional methods:
+
+|   |   |
+|---|---|
+|[getFlexGrow](objects/Flexbox/getFlexGrow.md)|Returns the flex grow factor of the child object
+|[setFlexGrow](objects/Flexbox/setFlexGrow.md)|Sets the flex grow factor of the child object
+|[getFlexShrink](objects/Flexbox/getFlexShrink.md)|Returns the flex shrink factor of the child object
+|[setFlexShrink](objects/Flexbox/setFlexShrink.md)|Sets the flex shrink factor of the child object
+|[getFlexBasis](objects/Flexbox/getFlexBasis.md)|Returns the flex basis of the child object
+|[setFlexBasis](objects/Flexbox/setFlexBasis.md)|Sets the flex basis of the child object
 
 ### Example
 
@@ -16,15 +34,18 @@ Here's an example of how to create a Flexbox object:
 
 ```lua
 local main = basalt.createFrame()
+local main = basalt.createFrame()
 local flexbox = main:addFlexbox()
-  :setFlexDirection("column")
+  :setDirection("column")
   :setJustifyContent("space-between")
-  :setAlignItems("center")
   :setSpacing(5)
+  :setWrap("wrap")
+
+flexbox:addButton()
 ```
 
 Alternatively, you can create a flexbox using an XML layout:
 
 ```xml
-<flexbox flexDirection="column" justifyContent="space-between" alignItems="center" spacing="5">
+<flexbox direction="column" justifyContent="space-between" spacing="1" wrap="wrap">
 ```

docs/objects/Flexbox/addBreak.md

@@ -0,0 +1,22 @@
+## addBreak
+
+### Description
+
+The `addBreak` method adds a line break to the Flexbox container. This causes the subsequent children to start on a new line or column, depending on the flex direction. This is helpful when you want to control the arrangement of children within the Flexbox container.
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default Flexbox, adds some objects to it, and then adds a break before adding more objects.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+flexbox:addButton()
+flexbox:addButton()
+flexbox:addBreak() -- adds a line break
+flexbox:addButton() -- this object will start on a new line
+```

docs/objects/Flexbox/getDirection.md

@@ -0,0 +1,20 @@
+## getDirection
+
+### Description
+
+Returns the current direction in which the child objects are arranged within the Flexbox.
+
+### Returns
+
+1. `string` The direction in which the child objects are arranged. Possible values are: row, column.
+
+### Usage
+
+* Creates a default Flexbox, sets the direction, and then retrieves it.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setDirection("column")
+local direction = flexbox:getDirection() -- returns "column"
+```

docs/objects/Flexbox/getFlexBasis.md

@@ -0,0 +1,21 @@
+## getFlexBasis
+
+### Description
+
+The `getFlexBasis` method retrieves the initial main size of a child object within the Flexbox container. This value represents the starting point for further calculations. If the Flexbox has a direction of 'row', the flex basis is akin to the width. For 'column', it's akin to height.
+
+### Returns
+
+1. `number` The current flex basis of the object
+
+### Usage
+
+* Creates a default Flexbox, adds some objects to it, sets the flex basis for the first object, and retrieves it.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+local object1 = flexbox:addButton()
+object1:setFlexBasis(10) -- this object will have an initial size of 50 pixels along the main axis
+basalt.debug(object1:getFlexBasis()) -- prints: 50
+```

docs/objects/Flexbox/getFlexGrow.md

@@ -0,0 +1,21 @@
+## getFlexGrow
+
+### Description
+
+The `getFlexGrow` method retrieves the grow factor of a child object within the Flexbox container. This value determines how much of the remaining space along the main axis the child should take up, in relation to the other children.
+
+### Returns
+
+1. `number` The grow factor of the child object.
+
+### Usage
+
+* Creates a default Flexbox, adds some objects to it, sets the flexGrow for the first object, and then retrieves this value.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+local object1 = flexbox:addButton()
+object1:setFlexGrow(1) -- this object will grow to take up remaining space
+basalt.debug(object1:getFlexGrow()) -- prints 1
+```

docs/objects/Flexbox/getFlexShrink.md

@@ -0,0 +1,21 @@
+## getFlexShrink
+
+### Description
+
+The `getFlexShrink` method retrieves the current shrink factor of a child object within the Flexbox container. This value represents how much the object would shrink compared to other objects in the container, in case there isn't enough space.
+
+### Returns
+
+1. `number` The current shrink factor of the object.
+
+### Usage
+
+* Creates a default Flexbox, adds some objects to it, sets the flexShrink for the first object, and retrieves it.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+local object1 = flexbox:addButton()
+object1:setFlexShrink(2) -- this object will shrink twice as much as the others if necessary
+basalt.debug(object1:getFlexShrink()) -- prints: 2
+```

docs/objects/Flexbox/getJustifyContent.md

@@ -0,0 +1,20 @@
+## getJustifyContent
+
+### Description
+
+Returns the current method used for aligning the child objects along the main axis within the Flexbox.
+
+### Returns
+
+1. `string` The method used for aligning the child objects. Possible values are: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`.
+
+### Usage
+
+* Creates a default Flexbox, sets the justify content, and then retrieves it.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setJustifyContent("space-between")
+local justifyContent = flexbox:getJustifyContent() -- returns "space-between"
+```

docs/objects/Flexbox/getWrap.md

@@ -0,0 +1,20 @@
+## getWrap
+
+### Description
+
+Returns the current setting for whether the child objects should wrap onto the next line if there isn't enough room on the main axis within the Flexbox.
+
+### Returns
+
+1. `string` returns `nowrap` or `wrap`
+
+### Usage
+
+* Creates a default Flexbox, sets the wrap, and then retrieves it.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setWrap("wrap")
+local wrapSetting = flexbox:getWrap() -- returns wrap
+```

docs/objects/Flexbox/setAlignItems.md

@@ -1,23 +0,0 @@
-## setJustifyContent
-
-### Description
-
-Determines how the children are aligned along the off 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 align items to space-between.
-
-```lua
-local main = basalt.createFrame()
-local flexbox = mainFrame:addFlexbox()
-      :setAlignItems("space-between")
-```

docs/objects/Flexbox/setDirection.md

@@ -1,4 +1,4 @@
-## setFlexDirection
+## setDirection
 
 ### Description
 
@@ -19,5 +19,5 @@ Sets the direction in which the children will be placed
 ```lua
 local main = basalt.createFrame()
 local flexbox = mainFrame:addFlexbox()
-      :setFlexDirection("column")
+      :setDirection("column")
 ```

docs/objects/Flexbox/setFlexBasis.md

@@ -0,0 +1,24 @@
+## setFlexBasis
+
+### Description
+
+The `setFlexBasis` method sets the initial main size of a child object within the Flexbox container. This value represents the starting point for further calculations. If the Flexbox has a direction of 'row', the flex basis is akin to the width. For 'column', it's akin to height.
+
+### Parameters
+
+1. `number` Flex basis. Currently only numbers available.
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default Flexbox, adds some objects to it, and sets the flex basis for the first object.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+local object1 = flexbox:addButton()
+object1:setFlexBasis(10) -- this object will have an initial size of 10 pixels along the main axis
+```

docs/objects/Flexbox/setFlexGrow.md

@@ -0,0 +1,25 @@
+## setFlexGrow
+
+### Description
+
+The `setFlexGrow` method sets the grow factor of a child object within the Flexbox container. This determines how much of the remaining space along the main axis the child should take up, in relation to the other children. A larger grow factor means the child will take up more of the remaining space.
+
+### Parameters
+
+1. `number` The grow factor for the child object. This should be a non-negative number. A value of 0 means the child will not grow beyond its initial size. Default is 0.
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default Flexbox, adds some objects to it, and sets the flexGrow for the first object.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+local object1 = flexbox:addButton()
+object1:setFlexGrow(1) -- this object will grow to take up remaining space
+local object2 = flexbox:addButton() -- this object will not grow
+```

docs/objects/Flexbox/setFlexShrink.md

@@ -0,0 +1,24 @@
+## setFlexShrink
+
+### Description
+
+The `setFlexShrink` method sets the shrink factor of a child object within the Flexbox container. This value determines how much the child should shrink relative to the rest of the objects in the flex container, if necessary.
+
+### Parameters
+
+1. `number` The shrink factor of the child object. The default is 0. A higher value will cause the object to shrink more.
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default Flexbox, adds some objects to it, and sets the flexShrink for the first object.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+local object1 = flexbox:addButton()
+object1:setFlexShrink(2) -- this object will shrink twice as much as the others if necessary
+```

docs/objects/Flexbox/setJustifyContent.md

@@ -6,7 +6,7 @@ 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)
+1. `string` One of ("flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly") - 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
 

docs/objects/Flexbox/setWrap.md

@@ -0,0 +1,25 @@
+## setWrap
+
+### Description
+
+Determines whether the child objects should wrap onto the next line when there isn't enough room along the main axis. The default value is 'nowrap'.
+
+### Parameters
+
+1. `string` If set to `wrap`, the child objects will wrap onto the next line when they run out of space. If set to `nowrap`, they will not.
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default Flexbox and sets the wrapping to `wrap`.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setWrap("wrap")
+```
+
+If the contents of the Flexbox exceed its size, they will automatically move to the next line, creating a wrapping effect. This is particularly useful when designing responsive layouts that adapt to different screen sizes or window dimensions.

docs/objects/Flexbox/updateLayout.md

@@ -0,0 +1,22 @@
+## updateLayout
+
+### Description
+
+The `updateLayout` method forces the Flexbox container to manually update its layout. This is particularly useful in situations where dynamic changes occur within the Flexbox and you want to ensure that the layout correctly reflects these changes.
+
+By default this is not necessarily required. Because the flexbox automatically updates it's layout.
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default Flexbox, adds an object to it, and then forces a manual layout update.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+flexbox:addObject(myObject)
+flexbox:updateLayout() -- forces a manual update of the layout
+```