{"meta":"<h2 id=\"Develop Guide\">Develop Guide <a class=\"header-anchor scroll-count-item\" href=\"#Develop Guide\" data-scroll-id=\"Develop Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Flex box, added in 1.19.0+, support IE10+\n<code>display: flex</code> of IE docs: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673531(v=vs.85)</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Box\">Box <a class=\"header-anchor scroll-count-item\" href=\"#Box\" data-scroll-id=\"Box\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>flex</td>\n<td>Same as css attribute <code>flex</code>, support array mode setting</td>\n<td>| CSS.Property.Flex<br> | [CSS.Property.FlexGrow, CSS.Property.FlexShrink, CSS.Property.FlexBasis]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>direction</td>\n<td>Layout direction, same as css attribute `flex</td>\n<td>CSS.Property.FlexDirection</td>\n<td>&apos;column&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>wrap</td>\n<td>Wrap or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>spacing</td>\n<td>Element spacing</td>\n<td>Spacing</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>margin</td>\n<td>Container outer spacing</td>\n<td>Spacing</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>padding</td>\n<td>Container inner spacing</td>\n<td>Spacing</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>justify</td>\n<td>The alignment of items on the main axis, same as css attribute `justify</td>\n<td>CSS.Property.JustifyContent</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>align</td>\n<td>The alignment of items on the cross axis, same as css attribute `align</td>\n<td>CSS.Property.AlignItems</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>component</td>\n<td>Custom JSX tag name</td>\n<td>keyof React.JSX.IntrinsicElements</td>\n<td>&apos;div&apos;</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Spacing\">Spacing <a class=\"header-anchor scroll-count-item\" href=\"#Spacing\" data-scroll-id=\"Spacing\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">Spacing</span> <span class=\"token operator\">=</span>\n    <span class=\"token operator\">|</span> <span class=\"token builtin\">number</span>\n    <span class=\"token operator\">|</span> <span class=\"token punctuation\">[</span>topAndBottom<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> rightAndLeft<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">]</span>\n    <span class=\"token operator\">|</span> <span class=\"token punctuation\">[</span>top<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> rightAndLeft<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> bottom<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">]</span>\n    <span class=\"token operator\">|</span> <span class=\"token punctuation\">[</span>top<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> right<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> bottom<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> left<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"}