{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-flex-direction/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"d5c143a1-66ae-5ff2-8493-bb067a67812f","title":"Tailwind CSS Flex Direction","slug":"/classes/tailwind-flex-direction/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"15 May 2024\",\n  \"title\": \"Tailwind CSS Flex Direction\",\n  \"metaTitle\": \"Tailwind Flex Direction\",\n  \"metaDescription\": \"The tailwind flex direction utility class allows you to control the direction in which flex items are laid out within a flex container\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-flex-direction\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Flex direction\"), mdx(\"p\", null, \"The tailwind flex direction utility class allows you to control the direction in which flex items are laid out within a flex container. It provides a set of classes that enable you to easily specify the flex direction, allowing you to create flexible and responsive layouts.\"), mdx(\"h2\", null, \"Setting Tailwind Flex Direction\"), mdx(\"p\", null, \"To set the tailwind flex direction of a flex container, you can use the flex class in combination with one of the following classes:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flex-row\"), \": This sets the flex direction to horizontal, with flex items laid out in a row from left to right.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flex-row-reverse\"), \": This sets the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flex-col\"), \": This sets the flex direction to vertical, with flex items laid out in a column from top to bottom.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flex-col-reverse\"), \": This sets the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top.\"))), mdx(\"h2\", null, \"Tailwind Flex Row\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://windframe.dev/classes/flex-direction/flex-row\"\n  }, \"Tailwind flex row\"), \" class is used to set the flex direction to horizontal, with flex items laid out in a row from left to right.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"flex flex-row\\\">\\n  <div class=\\\"flex-1\\\">A</div>\\n  <div class=\\\"flex-1\\\">B</div>\\n  <div class=\\\"flex-1\\\">C</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"mt-2 flex  flex-row space-x-4\"\n  }, mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"A\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"B\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"C\"))), mdx(\"h2\", null, \"Tailwind Flex-Row-Reverse\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://windframe.dev/classes/flex-direction/flex-row-reverse\"\n  }, \"Tailwind flex row reverse\"), \" class is used to set the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"flex flex-row-reverse\\\">\\n  <div class=\\\"flex-1\\\">A</div>\\n  <div class=\\\"flex-1\\\">B</div>\\n  <div class=\\\"flex-1\\\">C</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-yellow-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"mt-2 flex flex-row-reverse space-x-reverse space-x-4\"\n  }, mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"flex-row\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"flex-row\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"flex-row\"))), mdx(\"h2\", null, \"Tailwind Flex-Col\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://windframe.dev/classes/flex-direction/flex-col\"\n  }, \"Tailwind flex col\"), \" class is used to set the flex direction to vertical, with flex items laid out in a column from top to bottom\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"flex flex-col\\\">\\n  <div class=\\\"flex-1\\\">A</div>\\n  <div class=\\\"flex-1\\\">B</div>\\n  <div class=\\\"flex-1\\\">C</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-indigo-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"mt-2 flex flex-col space-y-4\"\n  }, mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-indigo-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"A\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-indigo-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"B\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-indigo-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"C\"))), mdx(\"h2\", null, \"Tailwind Flex-Col-Reverse\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://windframe.dev/classes/flex-direction/flex-col-reverse\"\n  }, \"Tailwind flex col reverse\"), \" class is used to set the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"flex flex-col-reverse\\\">\\n  <div class=\\\"flex-1\\\">A</div>\\n  <div class=\\\"flex-1\\\">B</div>\\n  <div class=\\\"flex-1\\\">C</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-green-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"mt-2 flex flex-col-reverse space-y-reverse space-y-4\"\n  }, mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-green-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"A\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-green-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"B\"), mdx(\"div\", {\n    className: \"h-16 w-24 rounded-md bg-green-500 text-white flex items-center justify-center font-extrabold\"\n  }, \"C\"))), mdx(\"p\", null, \"That's it! You now have a good understanding of how to use the flex direction utility classes in Tailwind CSS to control the direction in which flex items are laid out within a flex container.\"), mdx(\"h2\", null, \"Tailwind Flex Direction Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-row\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-direction: row;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-row-reverse\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-direction: row-reverse;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-col\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-direction: column;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-col-reverse\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex-direction: column-reverse;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=footers2\"\n  }, \"footer\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-flex-direction","title":"Tailwind Flex direction","items":[{"url":"#setting-tailwind-flex-direction","title":"Setting Tailwind Flex Direction"},{"url":"#tailwind-flex-row","title":"Tailwind Flex Row"},{"url":"#preview","title":"Preview"},{"url":"#tailwind-flex-row-reverse","title":"Tailwind Flex-Row-Reverse"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-flex-col","title":"Tailwind Flex-Col"},{"url":"#preview-2","title":"Preview"},{"url":"#tailwind-flex-col-reverse","title":"Tailwind Flex-Col-Reverse"},{"url":"#preview-3","title":"Preview"},{"url":"#tailwind-flex-direction-class-table","title":"Tailwind Flex Direction Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-flex-direction.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Flex Direction","lastUpdated":"15 May 2024","metaDescription":"The tailwind flex direction utility class allows you to control the direction in which flex items are laid out within a flex container"}}},"pageContext":{"id":"d5c143a1-66ae-5ff2-8493-bb067a67812f"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}