CSS Flexbox Speed Snippets

Boost your CSS workflow with ultra-fast, predictable snippets for Flexbox and common layout structures. No more typing out repetitive flex properties—just type the prefix, name your class, and hit tab.

🚀 Features

Class Wrappers Built-in: Every snippet automatically wraps your styles in a .className { ... } block.
Smart Tab-stops: Automatically drops your cursor on the class selector, then steps through values like gap or alignment options using the Tab key.
Modern CSS Layouts: Includes ready-to-use boilerplate for sticky footers, navbars, and card stacks.

⌨️ Short-hand Reference

Core Flexbox Layouts

Prefix	Shortcut For	Generated Output
`fbr`	Flex Row	`display: flex; flex-direction: row;`
`fbc`	Flex Column	`display: flex; flex-direction: column;`
`fbrc`	Flex Row Centered	Row layout with center alignment on both axes.
`fbcc`	Flex Column Centered	Column layout with center alignment on both axes.
`fbrg`	Flex Row + Gap	Row layout with an adjustable `gap` property.
`fbcg`	Flex Column + Gap	Column layout with an adjustable `gap` property.
`fbrw`	Flex Row Wrap	Row layout configured to wrap with a gap.

Utilities & Advanced Layouts

Prefix	Shortcut For	Description
`fbfull`	Configurable Flexbox	Interactive drops downs to choose direction, justify, align, and gap.
`fchild`	Flex Child Shorthand	Instantly setups up `flex: grow shrink basis;`.
`fself`	Align Self	Overrides child alignment context.
`fbsb`	Space Between Row	Flex row with `justify-content: space-between`.
`fbsticky`	Sticky Footer	Full `100vh` column layout that forces footers to stay pinned.
`fbnav`	Navbar Boilerplate	Spaced-out flex row with standard navigation paddings.
`fbstack`	Card Stack	Vertical stack of components with quick alignment control.

🛠️ Usage

Open any .css file.
Type any prefix (e.g., fbrc) and hit Enter or Tab.

The snippet will generate:

.className {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

css-flex-snippets

Arxo Labs