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.
- 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.
| 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. |
| 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. |
- 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;
}