Flexbox

Flex

Use flex to create a block-level flex container.

CSS

Inline Flex

Use inline-flex to create an inline flex container.

CSS

Flex Direction

Utilities for controlling the direction of flex items.

row
row-reverse
col
col-reverse
CSS

Flex Wrap

Utilities for controlling how flex items wrap.

wrap
wrap-reverse
nowrap
CSS

Flex Stretch

Utilities for controlling how flex items both grow and shrink.

1
auto
initial
none
CSS
Customizing
// windi.config.js
export default {
  theme: {
    flex: {
      1: '1 1 0%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      inherit: 'inherit',
      none: 'none',
      2: '2 2 0%',
    },
  },
}

Flex Grow

Utilities for controlling how flex items grow.

grow-0
grow
CSS
Customizing
// windi.config.js
export default {
  theme: {
    flexGrow: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}

Flex Shrink

Utilities for controlling how flex items shrink.

shrink-0
shrink
CSS
Customizing
// windi.config.js
export default {
  theme: {
    flexShrink: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}