Flex

<ws-flex>
    <ws-titlebar>
        <span ws-x="[$title] [$title-text]">
            Column Direction (default)
        </span>
    </ws-titlebar>
    <ws-flex>
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 1
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 2
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 3
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 4
        </ws-chip>
    </ws-flex>

    <ws-titlebar>
        <span ws-x="[$title] [$title-text]">
            Row Direction
        </span>
    </ws-titlebar>
    <ws-flex ws-x="[fl.dir row]">
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 1
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 2
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 3
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary]">
            Item 4
        </ws-chip>
    </ws-flex>

    <ws-titlebar>
        <span ws-x="[$title] [$title-text]">
            Flex Item Properties
        </span>
    </ws-titlebar>
    <ws-flex ws-x="[fl.dir row] [fl.wr wrap]">
        <ws-chip ws-x="[$outline] [$color @primary] [fl.grow 1]">
            Item 1
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary] [fl.grow 3]">
            Item 2
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary] [fl.grow 1]">
            Item 3
        </ws-chip>
        <ws-chip ws-x="[$outline] [$color @primary] [fl.grow 2] [fl.basis 150px]">
            Item 4
        </ws-chip>
    </ws-flex>
</ws-flex>