ComfortCSS Flexbox

Clean, modular, and RTL-ready Flexbox classes with zero specificity (:where()) and logical properties. Part of the Ultra CSS ecosystem.

Installation

npm install @comfortcss/flex @comfortcss/tokens

Requires @comfortcss/tokens for spacing values (peer dependency).

Usage

@import '~@comfortcss/tokens';
@import '~@comfortcss/flex';

Container

| Classes | Purpose | |---------|---------| | .flex, .inline-flex | Create flex container |

Direction

| Classes | Purpose | |---------|---------| | .flex-row, .flex-col, .flex-row-reverse, .flex-col-reverse | Create flex container |

Wrap

| Classes | Purpose | |---------|---------| | .flex-wrap, .flex-nowrap, .flex-wrap-reverse | Line wrapping |

Main axis

| Classes | Purpose | |---------|---------| | .justify-* (start, end, center, between, around, evenly) | Horizontal alignment |

Cross axis

| Classes | Purpose | |---------|---------| | .items-*, .content-* | Vertical alignment |

Items

| Classes | Purpose | |---------|---------| | .flex-1, .flex-auto, .flex-none, .grow, .shrink, .basis-* | Item sizing & flexibility |

Gap

| Classes | Purpose | |---------|---------| | .gap-*, .gap-x-*, .gap-y-* (size from tokens) | Spacing between items |

Dependencies

• @comfortcss/tokens

License

MIT