Logo Windi CSS

Флексбокс

Flex

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

CSS
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

Inline Flex

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

CSS
.inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}

Flex Direction

Утилиты для управления направлением гибких элементов.

row
row-reverse
col
col-reverse
CSS
.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

Flex Wrap

Утилиты для управления переносом гибких элементов.

wrap
wrap-reverse
nowrap
CSS
.flex-wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

Flex Stretch

Утилиты для управления увеличением и уменьшением гибких элементов.

1
auto
initial
none
CSS
.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}
Персонализация
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
.flex-grow-0 {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  -webkit-flex-grow: 0;
  flex-grow: 0;
}
Персонализация
windi.config.js
export default {
  theme: {
    flexGrow: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}

Flex Shrink

Утилиты для управления сжатием гибких элементов.

shrink-0
shrink
CSS
.flex-shrink-0 {
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
Персонализация
windi.config.js
export default {
  theme: {
    flexShrink: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}