Flex

<div class="usa-section">
    <div class="grid-container">
        <h2>Flex test</h2>
        <p class="usa-intro">
            Test to verify flex properties, specifically `flex` fill and `flex`
            shorthands are working properly in <strong>all</strong> browsers,
            including IE11.
        </p>
    </div>
</div>

<section>
    <div class="grid-container">
        <h3>Grid</h3>
        <div class="grid-row">
            <div class="grid-col-auto border border-primary-light bg-primary-lighter padding-4">
                .grid-col-auto
            </div>
            <div class="grid-col-fill border border-primary-light bg-primary-lighter padding-4">
                .grid-col-fill
            </div>
            <div class="grid-col-auto border border-primary-light bg-primary-lighter padding-4">
                .grid-col-auto
            </div>
        </div>
        <div class="grid-row">
            <div class="grid-col border border-primary-light bg-primary-lighter padding-4">
                .grid-col
            </div>
            <div class="grid-col-fill border border-primary-light bg-primary-lighter padding-4">
                .grid-col-fill
            </div>
            <div class="grid-col border border-primary-light bg-primary-lighter padding-4">
                .grid-col
            </div>
        </div>
        <div class="grid-row">
            <div class="flex-1 grid-col border border-primary-light bg-primary-lighter padding-4">
                .flex-1
            </div>
            <div class="flex-1 grid-col border border-primary-light bg-primary-lighter padding-4">
                .flex-1
            </div>
            <div class="grid-col border border-primary-light bg-primary-lighter padding-4">
                .grid-col
            </div>
        </div>
        <div class="grid-row">
            <div class="tablet:grid-col-4 border border-primary-light bg-primary-lighter padding-4">
                .tablet:grid-col-4
            </div>
            <div class="tablet:grid-col-4 desktop:grid-col-fill border border-primary-light bg-primary-lighter padding-4">
                .tablet:grid-col-4.desktop:grid-col-fill
            </div>
            <div class="grid-col-auto border border-primary-light bg-primary-lighter padding-4">
                .grid-col-auto
            </div>
        </div>
    </div>
</section>

<section class="usa-section">
    <div class="grid-container">
        <h3>Utilities</h3>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
            <div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
            <div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
            <div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
            <div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
            <div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
            <div class="border bg-accent-warm padding-4 flex-2">.flex-2</div>
            <div class="border bg-accent-warm padding-4 flex-2">.flex-2</div>
            <div class="border bg-accent-warm padding-4 flex-3">.flex-3</div>
            <div class="border bg-accent-warm padding-4 flex-4">.flex-4</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
            <div class="border bg-accent-warm padding-4 flex-5">.flex-5</div>
            <div class="border bg-accent-warm padding-4 flex-6">.flex-6</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-7">.flex-7</div>
            <div class="border bg-accent-warm padding-4 flex-5">.flex-5</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-8">.flex-8</div>
            <div class="border bg-accent-warm padding-4 flex-4">.flex-4</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-9">.flex-9</div>
            <div class="border bg-accent-warm padding-4 flex-3">.flex-3</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-10">.flex-10</div>
            <div class="border bg-accent-warm padding-4 flex-2">.flex-2</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-11">.flex-11</div>
            <div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm padding-4 flex-12">.flex-12</div>
        </div>
        <div class="display-flex flex-row">
            <div class="border bg-accent-warm-light padding-4 flex-fill">
                <h3>.flex-fill</h3>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
                    dignissimos enim recusandae, qui possimus eos ullam, natus repellendus
                    eaque veniam harum officiis distinctio unde temporibus, ipsa ex est
                    nulla amet cupiditate facilis accusamus officia eum hic magnam! Nemo,
                    porro iure!
                </p>
            </div>
            <div class="flex-auto border bg-accent-warm-light padding-4">
                <h3>.flex-auto</h3>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
                    accusamus facilis nam, dignissimos illum, iure obcaecati, officia
                    ratione necessitatibus asperiores voluptas mollitia amet commodi nisi!
                    Aliquam deserunt illum, quibusdam rem adipisci sapiente minus veniam
                    pariatur! Dolorum quisquam quos libero esse voluptate. Officia, soluta
                    placeat. Nemo, animi! Qui minima sequi omnis, quibusdam mollitia in.
                    Iste laborum possimus temporibus amet, ipsa magni.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eius
                    ducimus atque recusandae quidem quia illum, eos, minus, mollitia
                    repellat quaerat ipsam modi? Neque ullam commodi pariatur? Voluptate
                    incidunt, tempora odio modi neque veritatis ratione perferendis
                    necessitatibus quo animi dolorum.
                </p>
            </div>
        </div>
        <div class="display-flex flex-row flex-wrap">
            <div class="border bg-yellow padding-4 flex-1">
                <h3>.flex-1</h3>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
                    dignissimos enim recusandae, qui possimus eos ullam, natus repellendus
                    eaque veniam harum officiis distinctio unde temporibus, ipsa ex est
                    nulla amet cupiditate facilis accusamus officia eum hic magnam! Nemo,
                    porro iure!
                </p>
            </div>
            <div class="border bg-yellow padding-4 flex-3">
                <h3>.flex-3</h3>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
                    accusamus facilis nam, dignissimos illum, iure obcaecati, officia
                    ratione necessitatibus asperiores voluptas mollitia amet commodi nisi!
                    Aliquam deserunt illum, quibusdam rem adipisci sapiente minus veniam
                    pariatur! Dolorum quisquam quos libero esse voluptate. Officia, soluta
                    placeat. Nemo, animi! Qui minima sequi omnis, quibusdam mollitia in.
                    Iste laborum possimus temporibus amet, ipsa magni.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eius
                    ducimus atque recusandae quidem quia illum, eos, minus, mollitia
                    repellat quaerat ipsam modi? Neque ullam commodi pariatur? Voluptate
                    incidunt, tempora odio modi neque veritatis ratione perferendis
                    necessitatibus quo animi dolorum.
                </p>
            </div>
        </div>
        <div class="display-flex flex-row flex-wrap">
            <div class="border bg-yellow padding-4 flex-auto">
                <h4>.flex-auto</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
                    dignissimos enim recusandae, qui possimus eos ullam, natus repellendus
                    eaque veniam harum officiis distinctio unde temporibus, ipsa ex est
                    nulla amet cupiditate facilis accusamus officia eum hic magnam! Nemo,
                    porro iure!
                </p>
            </div>
            <div class="border bg-yellow padding-4 flex-2">
                <h4>.flex-2</h4>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
                    accusamus facilis nam, dignissimos illum, iure obcaecati, officia
                    ratione necessitatibus asperiores voluptas mollitia amet commodi nisi!
                    Aliquam deserunt illum, quibusdam rem adipisci sapiente minus veniam
                    pariatur! Dolorum quisquam quos libero esse voluptate. Officia, soluta
                    placeat. Nemo, animi! Qui minima sequi omnis, quibusdam mollitia in.
                    Iste laborum possimus temporibus amet, ipsa magni.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eius
                    ducimus atque recusandae quidem quia illum, eos, minus, mollitia
                    repellat quaerat ipsam modi? Neque ullam commodi pariatur? Voluptate
                    incidunt, tempora odio modi neque veritatis ratione perferendis
                    necessitatibus quo animi dolorum.
                </p>
            </div>
        </div>
        <h4>Align-self (row)</h4>
        <div class="display-flex flex-row height-card bg-base-lightest margin-bottom-3">
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-stretch">.flex-align-self-stretch</div>
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-start">.flex-align-self-start</div>
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-center">.flex-align-self-center</div>
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-end">.flex-align-self-end</div>
        </div>
        <h4>Align-self (column)</h4>
        <div class="display-flex flex-column bg-base-lightest margin-bottom-3">
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-stretch">.flex-align-self-stretch</div>
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-start">.flex-align-self-start</div>
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-center">.flex-align-self-center</div>
            <div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-end">.flex-align-self-end</div>
        </div>
    </div>
</section>

<section class="usa-section">
    <div class="grid-container">
        <h3>Real scenarios</h3>
        <ul class="usa-card-group">
            <li class="usa-card tablet:grid-col-4">
                <div class="usa-card__container">
                    <div class="usa-card__header">
                        <h3 class="usa-card__heading">
                            There was a feller here once by the name of Jim Smiley
                        </h3>
                    </div>
                    <div class="usa-card__body">
                        <p>
                            In the winter of '49 or may be it was the spring of '50 I don't
                            recollect exactly, somehow, though what makes me think it was one
                            or the other is because I remember the big flume wasn't finished
                            when he first came to the camp:
                        </p>
                        <ol class="usa-list">
                            <li>
                                But any way, he was the curiosest man about always betting on
                                any thing that turned up
                            </li>
                            <li>
                                If he could get anybody to bet on the other side; and if he
                                couldn't, he'd change sides.
                            </li>
                            <li>
                                Any way that suited the other man would suit him any way just
                                so's he got a bet, he was satisfied.
                            </li>
                            <li>
                                But still he was lucky, uncommon lucky; he most always come out
                                winner.
                            </li>
                        </ol>
                    </div>
                    <div class="usa-card__footer">
                        <a href="javascript:void(0);" class="usa-button">Help the less fortunate</a>
                    </div>
                </div>
            </li>
            <li class="usa-card tablet:grid-col-4 desktop:grid-col-fill">
                <div class="usa-card__container">
                    <div class="usa-card__header">
                        <h3 class="usa-card__heading">Garrulous old Simon Wheeler</h3>
                        <p class="font-sans-6 text-primary margin-top-1">
                            I hereunto append the result.
                        </p>
                    </div>
                    <div class="usa-card__media usa-card__media--fix-aspect" aria-hidden="true">
                        <div class="usa-card__img">
                            <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                        </div>
                    </div>
                    <div class="usa-card__body">
                        <p>
                            <em>This card has aria-hidden on the image container.</em>
                        </p>
                        <p>
                            I found Simon Wheeler dozing comfortably by the bar-room stove of
                            the old, dilapidated tavern in the ancient mining camp of Angel's,
                            and I noticed that he was fat and bald-headed, and had an
                            expression of winning gentleness and simplicity upon his tranquil
                            countenance.
                        </p>
                    </div>
                    <div class="usa-card__footer">
                        <a href="javascript:void(0);" class="usa-button">Express gentleness</a>
                    </div>
                </div>
            </li>
            <li class="usa-card tablet:grid-col-6">
                <div class="usa-card__container">
                    <div class="usa-card__header">
                        <h3 class="usa-card__heading">He never smiled, he never frowned</h3>
                    </div>
                    <div class="usa-card__media">
                        <div class="usa-card__img">
                            <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                        </div>
                    </div>
                    <div class="usa-card__body">
                        <p>
                            Simon Wheeler backed me into a corner and blockaded me there with
                            his chair, and then sat me down and reeled off the monotonous
                            narrative which follows this paragraph. He never smiled, he never
                            frowned, he never changed his voice from the gentle-flowing key to
                            which he tuned the initial sentence, he never betrayed the
                            slightest suspicion of enthusiasm; but all through the
                            interminable narrative there ran a vein of impressive earnestness
                            and sincerity, which showed me plainly that, so far from his
                            imagining that there was any thing ridiculous or funny about his
                            story, he regarded it as a really important matter, and admired
                            its two heroes as men of transcendent genius in finesse.
                        </p>
                    </div>
                    <div class="usa-card__footer">
                        <a href="javascript:void(0);" class="usa-button">Read more</a>
                    </div>
                </div>
            </li>
            <li class="usa-card tablet:grid-col-6">
                <div class="usa-card__container">
                    <div class="usa-card__header">
                        <h3 class="usa-card__heading">He never smiled, he never frowned</h3>
                    </div>
                    <div class="usa-card__media usa-card__media--inset">
                        <div class="usa-card__img">
                            <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                        </div>
                    </div>
                    <div class="usa-card__body">
                        <p>
                            Simon Wheeler backed me into a corner and blockaded me there with
                            his chair, and then sat me down and reeled off the monotonous
                            narrative which follows this paragraph. He never smiled, he never
                            frowned, he never changed his voice from the gentle-flowing key to
                            which he tuned the initial sentence, he never betrayed the
                            slightest suspicion of enthusiasm; but all through the
                            interminable narrative there ran a vein of impressive earnestness
                            and sincerity, which showed me plainly that, so far from his
                            imagining that there was any thing ridiculous or funny about his
                            story, he regarded it as a really important matter, and admired
                            its two heroes as men of transcendent genius in finesse.
                        </p>
                    </div>
                    <div class="usa-card__footer">
                        <a href="javascript:void(0);" class="usa-button">Read more</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="grid-container">
        <h3><a class="usa-link" href="https://github.com/uswds/uswds/issues/3471">Issue #3471</a></p>
            <div class="grid-row">
                <!-- <div class="gid-col-12"> -->
                <div class="grid-col-12">
                    <ul class="usa-card-group">
                        <li class="tablet:grid-col-4 usa-card">
                            <div class="usa-card__container">
                                <header class="usa-card__header">
                                    <h2 class="usa-card__heading">Title</h2>
                                </header>
                                <div class="usa-card__media">
                                    <div class="usa-card__img">
                                        <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="usa-card__footer">
                                    <button class="usa-button usa-button--accent-cool">Eat candy</button>
                                </div>
                            </div>
                        </li>
                        <li class="tablet:grid-col-4 usa-card">
                            <div class="usa-card__container">
                                <header class="usa-card__header">
                                    <h2 class="usa-card__heading">Title</h2>
                                </header>
                                <div class="usa-card__media">
                                    <div class="usa-card__img">
                                        <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="usa-card__footer">
                                    <button class="usa-button usa-button--accent-cool">Eat candy</button>
                                </div>
                            </div>
                        </li>
                        <li class="tablet:grid-col-4 usa-card">
                            <div class="usa-card__container">
                                <header class="usa-card__header">
                                    <h2 class="usa-card__heading">Title</h2>
                                </header>
                                <div class="usa-card__media">
                                    <div class="usa-card__img">
                                        <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                                    </div>
                                </div>
                                <div class="usa-card__footer">
                                    <button class="usa-button usa-button--accent-cool">Eat candy</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="usa-card-group">
                <li class="tablet:grid-col-4 usa-card">
                    <div class="usa-card__container">
                        <header class="usa-card__header">
                            <h2 class="usa-card__heading">Title</h2>
                        </header>
                        <div class="usa-card__media">
                            <div class="usa-card__img">
                                <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                            </div>
                        </div>
                        <div class="usa-card__footer">
                            <button class="usa-button usa-button--accent-cool">Eat candy</button>
                        </div>
                    </div>
                </li>
                <li class="tablet:grid-col-4 usa-card">
                    <div class="usa-card__container">
                        <header class="usa-card__header">
                            <h2 class="usa-card__heading">Title</h2>
                        </header>
                        <div class="usa-card__media">
                            <div class="usa-card__img">
                                <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                            </div>
                        </div>
                        <div class="usa-card__footer">
                            <button class="usa-button usa-button--accent-cool">Eat candy</button>
                        </div>
                    </div>
                </li>
                <li class="tablet:grid-col-4 usa-card">
                    <div class="usa-card__container">
                        <header class="usa-card__header">
                            <h2 class="usa-card__heading">Title</h2>
                        </header>
                        <div class="usa-card__media">
                            <div class="usa-card__img">
                                <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="" />
                            </div>
                        </div>
                        <div class="usa-card__footer">
                            <button class="usa-button usa-button--accent-cool">Eat candy</button>
                        </div>
                    </div>
                </li>
            </ul>
    </div>
</section>