package: '@thumbtack/tp-ui-utility-flexbox' kit: utility/flexbox.yaml platform: scss url: /api/components/utility/flexbox/scss/

import '@thumbtack/tp-ui-utility-flexbox'; import { Link } from 'gatsby'; import Alert from './../../../../www/src/components/alert';

Basic examples

<div class="tp-flex">
    <div class="tp-flex--auto">This flexes</div>
    <div class="tp-flex--none">No flex</div>
</div>

Center aligned

<div class="tp-flex tp-flex--items-center">
    <div class="tp-flex--auto">
        This flexes over two lines and is <br />
        centered aligned with the other flex children
    </div>
    <div class="tp-flex--none">No flex</div>
</div>

Responsive

Below the small breakpoint the layout will be column, above it will be row.

Size variations for each flex utility class are:

• --sm
• --md
• --lg

<div class="tp-flex tp-flex--column tp-flex--row--sm">
    <div class="tp-flex--auto">This flexes</div>
    <div class="tp-flex--none">No flex</div>
</div>