1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8134],{6914:function(e,n,t){t.r(n),t.d(n,{assets:function(){return h},contentTitle:function(){return a},default:function(){return f},frontMatter:function(){return l},metadata:function(){return i},toc:function(){return d}});var i=JSON.parse('{"id":"styling/flex-direction","title":"Flex Direction","description":"Flex direction controls the direction in which children of a node are laid out.","source":"@site/docs/styling/flex-direction.mdx","sourceDirName":"styling","slug":"/styling/flex-direction","permalink":"/docs/styling/flex-direction","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/yoga/tree/main/website/docs/styling/flex-direction.mdx","tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6},"sidebar":"docsSidebar","previous":{"title":"Flex Basis, Grow, and Shrink","permalink":"/docs/styling/flex-basis-grow-shrink"},"next":{"title":"Flex Wrap","permalink":"/docs/styling/flex-wrap"}}'),r=t(2540),s=t(3023),o=t(7266);const l={sidebar_position:6},a="Flex Direction",h={},d=[];function c(e){const n={a:"a",h1:"h1",header:"header",p:"p",strong:"strong",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"flex-direction",children:"Flex Direction"})}),"\n",(0,r.jsx)(n.p,{children:"Flex direction controls the direction in which children of a node are laid out.\nThis is also referred to as the main axis. The main axis is the direction in\nwhich children are laid out. The cross axis is the axis perpendicular to the\nmain axis, or the axis which wrapping lines are laid out in."}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Column (default)"}),": Align children from top to bottom. If ",(0,r.jsx)(n.a,{href:"/docs/styling/flex-wrap",children:"wrapping"})," is enabled then\nthe next line will start to the left first item on the top of the container."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Row"}),": Align children from left to right. If ",(0,r.jsx)(n.a,{href:"/docs/styling/flex-wrap",children:"wrapping"})," is enabled then\nthe next line will start under the first item on the left of the container."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Row reverse"}),": Align children from right to left. If ",(0,r.jsx)(n.a,{href:"/docs/styling/flex-wrap",children:"wrapping"})," is enabled then\nthe next line will start under the first item on the right of the container."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Column reverse"}),": Align children from bottom to top. If ",(0,r.jsx)(n.a,{href:"/docs/styling/flex-wrap",children:"wrapping"})," is enabled then\nthe next line will start to the left first item on the bottom of the container."]}),"\n",(0,r.jsx)(o.A,{code:"<Layout config={{useWebDefaults: false}}>\n<Node\n style={{\n width: 200,\n height: 200,\n padding: 10,\n flexDirection: 'column',\n }}>\n <Node style={{margin: 5, height: 50, width: 50}} />\n <Node style={{margin: 5, height: 50, width: 50}} />\n</Node>\n</Layout>"})]})}function f(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.