{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-flex/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"335efa68-007e-55e4-ad4b-5ea2b23d7799","title":"Tailwind CSS Flex","slug":"/classes/tailwind-flex/"},"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\": \"2 May 2024\",\n \"title\": \"Tailwind CSS Flex\",\n \"metaTitle\": \"Tailwind Flex\",\n \"metaDescription\": \"The tailwind flex utility classes allow you to easily create flexible and responsive layouts using CSS flexbox.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-flex\"\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\"), mdx(\"p\", null, \"The tailwind flex utility classes in Tailwind CSS allow you to easily create flexible and responsive layouts using CSS flexbox. With a range of options and flexibility, you can achieve different flexbox configurations and create dynamic designs.\"), mdx(\"h2\", null, \"Enabling Tailwind Flex Container\"), mdx(\"p\", null, \"To enable tailwind flex behavior on an element, you can use the flex utility class. By default, the flex class makes an element a flex container and arranges its children in a single row. Here's an example:\"), mdx(\"h2\", null, \"Tailwind flex initial\"), mdx(\"p\", null, \"By default, flex items have an initial value of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-grow: 0\"), \"and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-shrink: 1\"), \", which means they can grow to fill the available space and can shrink to prevent overflow. The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-initial\"), \" class can be used to override these default values.\"), mdx(\"h2\", null, \"Setting Tailwind Flex-initial Behavior\"), mdx(\"p\", null, \"To set the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/flex/flex-initial\"\n }, \"tailwind flex-initial\"), \" behavior of a flex item, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-initial\"), \" class. Applying this class to a flex item will make it start with its initial size, preventing it from growing or shrinking. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
short
\\n
flex initial
\\n
it grows when the item is large
\\n
\\n
\\n
short
\\n
flex initial
\\n
it grows when the item is large
\\n
\\n
\\n
short
\\n
flex initial
\\n
it grows when the item is large
\\n
\\n
short
\\n
flex initial
\\n
it grows when the item is large
\\n