{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-use-tailwind-css-flex/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"764e2b4e-8e45-5f20-82a6-20a9b92a9044","excerpt":"Tailwind flex Building responsive and flexible user interfaces is crucial in frontend development. Flexbox is an essential tool for this purpose, and Tailwind…","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 \"title\": \"How to use Tailwind CSS Flex\",\n \"lastUpdated\": \"8 May 2024\",\n \"date\": \"2021-01-10T02:16:04+01:00\",\n \"metaTitle\": \"How to use Tailwind Flex\",\n \"metaDescription\": \"Flexbox is a powerful CSS layout module, and when combined with Tailwind CSS, it becomes even more convenient and efficient. By utilizing Tailwind CSS flex utilities, you can easily create flexible and responsive layouts for your projects.\",\n \"type\": \"blog\",\n \"author\": \"Emmanuel Chinonso\",\n \"role\": \"Technical Writer/Web developer\",\n \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n \"image\": \"./_/images/how-to-use-tailwind-css-flex.png\",\n \"tags\": [\"tailwindcss\", \"css\", \"Programming\"],\n \"previousTitle\": \"How to Install Tailwind CSS in Vue.js\",\n \"previousPath\": \"how-to-install-tailwind-css-in-vuejs\",\n \"nextTitle\": \"How to use Tailwind CSS in HTML\",\n \"nextPath\": \"how-to-use-tailwind-css-in-HTML\",\n \"blogtype\": \"tailwindcss\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-use-tailwind-css-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, \"Building responsive and flexible user interfaces is crucial in frontend development. Flexbox is an essential tool for this purpose, and Tailwind CSS flex simplifies its usage, allowing you to create complex layouts effortlessly.\"), mdx(\"h2\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"What is Flexbox ?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"How to Use Tailwind CSS Flex\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Flex Containers\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Flex Items\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Modifying Flex Direction\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Controlling Flex Item Alignment\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Adjusting Flex Item Sizing\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Wrapping Flex Items\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\")), mdx(\"h2\", null, \"What is Flexbox ?\"), mdx(\"p\", null, \"Flexbox, short for flexible box, is a layout mode in CSS that makes it easy to create flexible and responsive layouts. It consists of two main components: flex containers and flex items. It's perfect for building navigation bars, footers, and other components that need to adapt to different screen sizes.\"), mdx(\"h2\", null, \"How to Use Tailwind CSS Flex\"), mdx(\"p\", null, \"Using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-flex\"\n }, \"Tailwind CSS flex\"), \" is incredibly easy. Here are the basic classes you need to get started:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"flex\"), \" - enables flexbox layout\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/flex/flex-wrap\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"flex-wrap\")), \" - wraps flex items to a new line\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"justify-center\"), \" - centers flex items horizontally\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"justify-space-between\"), \" - distributes flex items evenly\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"items-center\"), \" - centers flex items vertically\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"self-center\"), \" - centers a single flex item\")), mdx(\"h2\", null, \"Flex Containers\"), mdx(\"p\", null, \"A flex container holds multiple flex items and defines the main axis and cross axis of the flex layout. To create a Tailwind flex container, simply apply the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/flex/flex-1\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"flex\")), \" class to an element. By default, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-direction\"), \" property is set to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"row\"), \", which means the flex items will be arranged horizontally.\"), mdx(\"p\", null, \"Here's an example of creating a flex container:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n \\n
\\n\")), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-lg flex gap-2 text-white text-center bg-indigo-100 font-bold m-10\"\n }, mdx(\"div\", {\n className: \" bg-indigo-500 rounded my-5 mx-3 py-3 px-3\"\n }, \"A\"), mdx(\"div\", {\n className: \" bg-indigo-500 rounded my-5 mx-3 py-3 px-3\"\n }, \"B\"), mdx(\"div\", {\n className: \" bg-indigo-500 rounded my-5 mx-3 py-3 px-3\"\n }, \"C\")), mdx(\"h2\", null, \"Flex Items\"), mdx(\"p\", null, \"Flex items are the individual elements within a flex container. They can be manipulated and positioned within the container using flex utilities. By default, flex items will be arranged in the order they appear in the HTML markup.\"), mdx(\"p\", null, \"Here's an example of creating flex items within a flex container:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
Item 1
\\n
Item 2
\\n
Item 3
\\n
\\n
\\n A\\n
\\n
\\n B\\n
\\n
\\n C\\n
\\n
\\n
\\n 1\\n
\\n
\\n 2\\n
\\n
\\n 3\\n
\\n
\\n 4\\n
\\n
\\n
\\n A\\n
\\n
\\n B\\n
\\n
\\n C\\n
\\n
\\n
\\n A\\n
\\n
\\n B\\n
\\n
\\n C\\n
\\n
\\n \\n
\\n\")), mdx(\"h2\", null, \"Adjusting Flex Item Sizing\"), mdx(\"p\", null, \"You can adjust the sizing of flex items using utilities such as \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-grow\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-shrink\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-auto\"), \". These utilities allow you to control how flex items grow, shrink, or automatically adjust their size to fill the available space. These are the classes.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/flex/flex-auto\"\n }, \"Tailwind Flex Auto\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/flex/flex-grow\"\n }, \"Tailwind Flex Grow\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/flex/flex-shrink\"\n }, \"Tailwind Flex Shrink\"))), mdx(\"h2\", null, \"Tailwind Flex-Auto\"), mdx(\"p\", null, \"The Tailwind \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-auto\"), \" class shows how much an item will grow relative to the content of the flexible items. Here, the initial size is ignored, and it grows and shrinks according to its need.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
A
\\n
\\n B\\n
\\n
C
\\n
\\n
\\n A\\n
\\n
B
\\n
\\n C\\n
\\n
\\n \\n
\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n \\n \\n A\\n
\\n \\n B\\n
\\n \\n C\\n
\\n \\n\\n\")), mdx(\"p\", null, \"The code above represents the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-wrap\"), \" class.\"), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"relative rounded-t-xl overflow-auto p-8 bg-indigo-100\"\n }, mdx(\"div\", {\n className: \"flex flex-wrap gap-4 font-mono text-white text-sm font-extrabold leading-6 rounded-lg\"\n }, mdx(\"div\", {\n className: \"p-4 w-full rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg\"\n }, \"A\"), mdx(\"div\", {\n className: \"p-4 w-full rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg\"\n }, \"B\"), mdx(\"div\", {\n className: \"p-4 w-full rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg\"\n }, \"C\"))), mdx(\"h2\", null, \"Tailwind Flex Wrap Reverse\"), mdx(\"p\", null, \"Flex wrap reverse is a utility class that reverses the wrap flex items.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n \\n \\n A\\n
\\n \\n B\\n
\\n \\n C\\n
\\n \\n\\n\")), mdx(\"p\", null, \"The code above represents the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"flex-wrap-reverse\"), \" class.\"), mdx(\"h3\", null, \"Preview\"), mdx(\"div\", {\n className: \"relative rounded-t-xl overflow-auto p-8 bg-indigo-100\"\n }, mdx(\"div\", {\n className: \"flex flex-wrap-reverse gap-4 font-mono text-white text-sm font-extrabold leading-6 rounded-lg\"\n }, mdx(\"div\", {\n className: \"p-4 w-full rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg\"\n }, \"A\"), mdx(\"div\", {\n className: \"p-4 w-full rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg\"\n }, \"B\"), mdx(\"div\", {\n className: \"p-4 w-full rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg\"\n }, \"C\"))), mdx(\"h2\", null, \"Tailwind CSS Flex-no-wrap\"), mdx(\"p\", null, \"This Tailwind class doesn't allow flex items to wrap. This makes these flex items overflow the container. It doesn't regulate flex items to a box.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
\\n A\\n
\\n
\\n B\\n
\\n
\\n C\\n
\\n