Logo Windi CSS

Флексбокс

Flex

Используйте flex для создания гибкого контейнера на уровне блока.

CSS
Inline Flex 
Используйте inline-flex для создания встроенного гибкого контейнера.
CSS
Flex Direction 
Утилиты для управления направлением гибких элементов.
row
row-reverse
col
col-reverse
CSS
Flex Wrap 
Утилиты для управления переносом гибких элементов.
wrap
wrap-reverse
nowrap
CSS
Flex Stretch 
Утилиты для управления увеличением и уменьшением гибких элементов.
1
auto
initial
none
CSS
 Персонализация 
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 
Утилиты для управления ростом гибких элементов.
grow-0
grow
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    flexGrow: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}

Flex Shrink 
Утилиты для управления сжатием гибких элементов.
shrink-0
shrink
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    flexShrink: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}