Feo CSS v2.4.0
  • Introduction
  • What is Feo CSS?
  • Getting started
  • Design tokens
  • Themes
  • Credits
  • Layout
  • Center
  • Cluster
  • Dialog
  • Holy grail
  • Masonry
  • Pancake
  • Sidebar
  • Stack
  • Switcher
  • Tiles
  • Utilities
  • Token-based
  • Flexbox, grid and gap
  • Others
  • Position
  • Typography
  • Made with ♥️ by Crinkles

Utilities > Flexbox, grid and gap

Direction

The following classes set display: flex and set the flex-direction based on the value in its name.

  • .flex-col (column)
  • .flex-row
  • .flex-col-reverse (column-reverse)
  • .flex-row-reverse

Grow and shrink

  • .flex-grow: sets flex-grow: 1. Allows elements to grow and take available space within a flexbox.
  • .flex-grow-0: sets flex-grow: 0. Disallows elements to grow and take available space within a flexbox.
  • .flex-shrink: sets flex-shrink: 1. Allows elements to shrink below its size when the flexbox shrinks.
  • .flex-shrink-0: sets flex-shrink: 0. Disallows elements to shrink below its size when the flexbox shrinks.

Wrap

  • .flex-wrap: sets flex-wrap: wrap. This allows items exceeding the flexbox to go to a new line.
  • .flex-nowrap sets flex-wrap: nowrap. Going to a new line is disallowed.

Justify/align/place

  • Justify content: defines how content aligns around the main axis. Used with .justify-<value>.
  • Align content: defines how multi-line content aligns around the main axis. Used with .content-<value>.
  • Align items: defines how content aligns around the cross axis. Used with .items-<value>.
  • Self align: overwrites the default align items value set on the parent on individual elements within the Flexbox. Used with .self-`.
  • place items: Used with .place-<value>.

All these classes follow the same pattern: .<type>-<value>. Note that not all values are available for all types.

  • .<type>-start (flex-start)
  • .<type>-end (flex-end)
  • .<type>-center
  • .<type>-stretch
  • .<type>-baseline
  • .<type>-between (space-between)
  • .<type>-around (space-around)
  • .<type>-evenly (space-evenly)

Grid

Classes for CSS grids.

  • .grid-<number>: creates a grid with equal sized columns.
  • .grid-col-<number>: sets the grid-column property to the number.
  • .grid-row-<number>: sets ther grid-row property to the number.

Gap

The new gap property can be accessed by using the gap-<name>, where name is based on $feo-sizes.

Outline: DirectionGrow and shrinkWrapJustify/align/placeGridGap
Category:
Utilities
Source:
https://github.com
Last modified:
4/30/2022, 12:45:00 PM