Skip to content
Cloudflare Docs

Flex container

Flex is used 3 times on 1 pages.

Pages which use Flex

Pages

Partials

    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

    import { Flex } from "~/components";

    Example

    Turnstile Overview

    Turnstile Overview


    Turnstile Overview

    Turnstile Overview

    Turnstile Overview

     
    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>