import{_ as t,a,b as d,ag as l}from"./chunks/framework.BcrMLAmg.js";const f=JSON.parse('{"title":"FlexBox","description":"","frontmatter":{},"headers":[],"relativePath":"references/elements/Flexbox.md","filePath":"references/elements/Flexbox.md","lastUpdated":1757845213000}'),r={name:"references/elements/Flexbox.md"};function o(n,e,i,s,h,x){return d(),a("div",null,e[0]||(e[0]=[l('<h1 id="flexbox" tabindex="-1">FlexBox <a class="header-anchor" href="#flexbox" aria-label="Permalink to &quot;FlexBox&quot;">​</a></h1><p><em>This is the FlexBox class. It is a container that arranges its children in a flexible layout.</em><em>The flexbox element adds the following properties to its children:</em></p><p>Extends: <code>Container</code></p><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>flexDirection</td><td>string</td><td>&quot;row&quot;</td><td>The direction of the flexbox layout &quot;row&quot; or &quot;column&quot;</td></tr><tr><td>flexSpacing</td><td>number</td><td>1</td><td>The spacing between flex items</td></tr><tr><td>flexJustifyContent</td><td>string</td><td>&quot;flex-start&quot;</td><td>The alignment of flex items along the main axis</td></tr><tr><td>flexAlignItems</td><td>string</td><td>&quot;flex-start&quot;</td><td>The alignment of flex items along the cross axis</td></tr><tr><td>flexCrossPadding</td><td>number</td><td>0</td><td>The padding on both sides of the cross axis</td></tr><tr><td>flexWrap</td><td>boolean</td><td>false</td><td>Whether to wrap flex items onto multiple lines</td></tr></tbody></table><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to &quot;Functions&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#flexbox-addchild-element">FlexBox:addChild</a></td><td>FlexBox</td><td>Adds a child element to the flexbox</td></tr><tr><td><a href="#flexbox-addlinebreak-self">FlexBox:addLineBreak</a></td><td>FlexBox</td><td>Adds a new line break to the flexbox.</td></tr></tbody></table><h2 id="flexbox-addchild-element" tabindex="-1">FlexBox:addChild(element) <a class="header-anchor" href="#flexbox-addchild-element" aria-label="Permalink to &quot;FlexBox:addChild(element)&quot;">​</a></h2><p>Adds a child element to the flexbox</p><h3 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ul><li><code>element</code> <code>Element</code> The child element to add</li></ul><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ul><li><code>FlexBox</code> <code>self</code> The flexbox instance</li></ul><h2 id="flexbox-addlinebreak-self" tabindex="-1">FlexBox:addLineBreak(self) <a class="header-anchor" href="#flexbox-addlinebreak-self" aria-label="Permalink to &quot;FlexBox:addLineBreak(self)&quot;">​</a></h2><p>Adds a new line break to the flexbox</p><h3 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-label="Permalink to &quot;Parameters&quot;">​</a></h3><ul><li><code>self</code> <code>FlexBox</code> The element itself</li></ul><h3 id="returns-1" tabindex="-1">Returns <a class="header-anchor" href="#returns-1" aria-label="Permalink to &quot;Returns&quot;">​</a></h3><ul><li><code>FlexBox</code></li></ul>',19)]))}const u=t(r,[["render",o]]);export{f as __pageData,u as default};
