[Docs Site] Add Flex component for responsive image layouts (#17466)

Author: KianNH

src/components/Flex.astro

@@ -0,0 +1,3 @@
+<div class="flex flex-col md:flex-row justify-between gap-x-2 [&_p]:!mt-0">
+    <slot />
+</div>

src/components/index.ts

@@ -15,6 +15,7 @@ export { default as Example } from "./Example.astro";
 export { default as ExternalResources } from "./ExternalResources.astro";
 export { default as Feature } from "./Feature.astro";
 export { default as FeatureTable } from "./FeatureTable.astro";
+export { default as Flex } from "./Flex.astro";
 export { default as Glossary } from "./Glossary.astro";
 export { default as GlossaryDefinition } from "./GlossaryDefinition.astro";
 export { default as GlossaryTooltip } from "./GlossaryTooltip.astro";

src/content/docs/style-guide/components/flex.mdx

@@ -0,0 +1,37 @@
+---
+title: Flex container
+---
+
+The `<Flex>` component is intended for showing multiple images in a responsive layout.
+
+A row layout is used on medium-large viewports (i.e laptops or desktops), and a column on small viewports (i.e mobile devices).
+
+## Import
+
+```mdx
+import { Flex } from "~/components";
+```
+
+## Example
+
+```mdx live
+import { Flex } from "~/components";
+
+{/* Make sure there is a newline between images, or Markdown groups them inside one <p> element. */}
+
+<Flex>
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+</Flex>
+
+<br />
+
+<Flex>
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+</Flex>
+```