var Component=(()=>{var s=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),b=(l,e)=>{for(var t in e)c(l,t,{get:e[t],enumerable:!0})},o=(l,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of x(e))!u.call(l,i)&&i!==t&&c(l,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return l};var w=(l,e,t)=>(t=l!=null?s(g(l)):{},o(e||!l||!l.__esModule?c(t,"default",{value:l,enumerable:!0}):t,l)),B=l=>o(c({},"__esModule",{value:!0}),l);var d=m((v,a)=>{a.exports=_jsx_runtime});var k={};b(k,{default:()=>F,frontmatter:()=>f});var n=w(d()),f={id:"flex",category:"layout",title:"Flex",package:"@chakra-ui/layout",description:"Flex is Box with display set to flex and comes with helpful style shorthand. It renders a `div` element."};function h(l){let e=Object.assign({h2:"h2",pre:"pre",code:"code",ul:"ul",li:"li",strong:"strong",p:"p",h3:"h3",blockquote:"blockquote"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Flex, Spacer } from '@chakra-ui/react' `})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Flex:"})," A ",(0,n.jsx)(e.code,{children:"Box"})," with ",(0,n.jsx)(e.code,{children:"display: flex"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Spacer:"}),` Creates an adjustable, empty space that can be used to tune the spacing between child elements within `,(0,n.jsx)(e.code,{children:"Flex"}),"."]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.p,{children:"Using the Flex components, here are some helpful shorthand props:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"flexDirection"})," is ",(0,n.jsx)(e.code,{children:"direction"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"flexWrap"})," is ",(0,n.jsx)(e.code,{children:"wrap"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"flexBasis"})," is ",(0,n.jsx)(e.code,{children:"basis"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"flexGrow"})," is ",(0,n.jsx)(e.code,{children:"grow"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"flexShrink"})," is ",(0,n.jsx)(e.code,{children:"shrink"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"alignItems"})," is ",(0,n.jsx)(e.code,{children:"align"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"justifyContent"})," is ",(0,n.jsx)(e.code,{children:"justify"})]}),` `]}),` `,(0,n.jsx)(e.p,{children:`While you can pass the verbose props, using the shorthand can save you some time.`}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Box 1 Box 2 Box 3 `})}),` `,(0,n.jsx)(e.h3,{id:"using-the-spacer",children:"Using the Spacer"}),` `,(0,n.jsxs)(e.p,{children:["As an alternative to ",(0,n.jsx)(e.code,{children:"Stack"}),", you can combine ",(0,n.jsx)(e.code,{children:"Flex"})," and ",(0,n.jsx)(e.code,{children:"Spacer"}),` to create stackable and responsive layouts.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Box 1 Box 2 `})}),` `,(0,n.jsx)(e.h3,{id:"flex-and-spacer-vs-grid-vs-stack",children:"Flex and Spacer vs Grid vs Stack"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Flex"})," and ",(0,n.jsx)(e.code,{children:"Spacer"})," components, ",(0,n.jsx)(e.code,{children:"Grid"})," and ",(0,n.jsx)(e.code,{children:"HStack"}),` treat children of different widths differently.`]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["In ",(0,n.jsx)(e.code,{children:"HStack"}),`, the children will have equal spacing between them but they won't span the entire width of the container.`]}),` `,(0,n.jsxs)(e.li,{children:["In ",(0,n.jsx)(e.code,{children:"Grid"}),`, the starting points of the children will be equally spaced but the gaps between them will not be equal.`]}),` `,(0,n.jsxs)(e.li,{children:["With ",(0,n.jsx)(e.code,{children:"Flex"})," and ",(0,n.jsx)(e.code,{children:"Spacer"}),`, the children will span the entire width of the container and also have equal spacing between them.`]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Flex and Spacer: Full width, equal Spacing Grid: The children start at the beginning, the 1/3 mark and 2/3 mark HStack: The children have equal spacing but don't span the whole container `})}),` `,(0,n.jsxs)(e.p,{children:["A good use case for ",(0,n.jsx)(e.code,{children:"Spacer"}),` is to create a navbar with a signup/login button aligned to the right.`]}),` `,(0,n.jsxs)(e.p,{children:["Since ",(0,n.jsx)(e.code,{children:"Spacer"})," renders a ",(0,n.jsx)(e.code,{children:"div"}),", any ",(0,n.jsx)(e.code,{children:"gap"}),` value provided to the parent is applied to both sides of this component, and therefore make the gap appear doubled when the spacer is completely collapsed.`]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:`The example below is not responsive on purpose as you might switch to a collapsed menu on mobile.`}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Chakra App `})})]})}function S(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(h,l)})):h(l)}var F=S;return B(k);})(); ;return Component;

Flex

Props#

Props#