{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-justify-content/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"580ac365-0ca9-5640-b200-96bd21ac3eaf","title":"Tailwind CSS Justify Content","slug":"/classes/tailwind-justify-content/"},"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\": \"17 May 2024\",\n \"title\": \"Tailwind CSS Justify Content\",\n \"metaTitle\": \"Tailwind CSS Justify Content\",\n \"metaDescription\": \"The justify-content utility class in Tailwind CSS allows you to control the alignment of flex items along the main axis of a flex container.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-justify-content\"\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 Justify Content\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-content\"), \" utility class in Tailwind CSS allows you to control the alignment of flex items along the main axis of a flex container. It provides a set of classes that enable you to easily specify the justification behavior, allowing you to create flexible and responsive layouts.\"), mdx(\"h2\", null, \"Setting Justify Content\"), mdx(\"p\", null, \"To set the justify content behavior of a flex container, you can use the justify-{value} class, where {value} can be one of the following options:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-start\"), \": This aligns flex items to the start of the main axis.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-end\"), \": This aligns flex items to the end of the main axis.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-center\"), \": This centers flex items along the main axis.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-between\"), \": This evenly distributes flex items along the main axis, with the first item aligned to the start and the last item aligned to the end.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-around\"), \": This evenly distributes flex items along the main axis, with equal space before, between, and after each item.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-evenly\"), \": This evenly distributes flex items along the main axis, with equal space between and around each item.\"))), mdx(\"h2\", null, \"Tailwind justify-start\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-start\"), \" class aligns flex items to the start of the main axis.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-indigo-100 p-10 \"\n }, mdx(\"div\", {\n className: \"flex justify-start -m-2\"\n }, mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-indigo-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"A\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-indigo-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"B\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-indigo-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"C\"))), mdx(\"h2\", null, \"Tailwind justify-center\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-center\"), \" class centers flex items along the main axis.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10 \"\n }, mdx(\"div\", {\n className: \"flex justify-center -m-2\"\n }, mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"A\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"B\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"C\"))), mdx(\"h2\", null, \"Tailwind justify-between\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-between\"), \" class evenly distributes flex items along the main axis, with the first item aligned to the start and the last item aligned to the end.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-yellow-100 p-10 \"\n }, mdx(\"div\", {\n className: \"flex justify-between -m-2\"\n }, mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"A\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"B\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-yellow-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"C\"))), mdx(\"h2\", null, \"Tailwind justify-around\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-around\"), \" class evenly distributes flex items along the main axis, with equal space before, between, and after each item.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
\\n\")), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-red-100 p-10 \"\n }, mdx(\"div\", {\n className: \"flex justify-around -m-2\"\n }, mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-red-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"A\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-red-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"B\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-red-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"C\"))), mdx(\"h2\", null, \"Tailwind justify-evenly\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"justify-evenly\"), \" class evenly distributes flex items along the main axis, with equal space between and around each item.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
A
\\n
B
\\n
C
\\n
\\n\")), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-purple-100 p-10 \"\n }, mdx(\"div\", {\n className: \"flex justify-evenly -m-2\"\n }, mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"A\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"B\"), mdx(\"div\", {\n className: \"h-16 w-16 rounded-md bg-purple-500 text-white flex items-center justify-center font-extrabold m-2\"\n }, \"C\"))), mdx(\"p\", null, \"That's it! You now have a good understanding of how to use the justify content utility classes in Tailwind CSS to control the alignment of flex items along the main axis of a flex container.\"), mdx(\"h2\", null, \"Tailwind Justify Content 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 }, \"justify-start\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-content: flex-start;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-end\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-content: flex-end;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-center\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-content: center;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-between\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-content: space-between;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-around\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-content: space-around;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-evenly\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"justify-content: space-evenly;\")))), 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-justify-content","title":"Tailwind Justify Content","items":[{"url":"#setting-justify-content","title":"Setting Justify Content"},{"url":"#tailwind-justify-start","title":"Tailwind justify-start"},{"url":"#preview","title":"Preview"},{"url":"#tailwind-justify-center","title":"Tailwind justify-center"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-justify-between","title":"Tailwind justify-between"},{"url":"#preview-2","title":"Preview"},{"url":"#tailwind-justify-around","title":"Tailwind justify-around"},{"url":"#tailwind-justify-evenly","title":"Tailwind justify-evenly"},{"url":"#tailwind-justify-content-class-table","title":"Tailwind Justify Content class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-justify-content.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Justify Content","lastUpdated":"17 May 2024","metaDescription":"The justify-content utility class in Tailwind CSS allows you to control the alignment of flex items along the main axis of a flex container."}}},"pageContext":{"id":"580ac365-0ca9-5640-b200-96bd21ac3eaf"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}