Flexbox

Свойства

$df - flex;
$di - inline-flex;

$rw - row;
$rr - row-reverse;
$cl - column;
$clr - column-reverse;

$fs - flex-start;
$fe - flex-end;
$cr - center;
$sb - space-between;
$sa - space-around;
$bl - baseline;
$sh - stretch;

SCSS

.block {
  @include flex($rw,$fs,$fs,$zui-4);
}

CSS

.block {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}

inline-flex

SCSS

.block {
  @include flex($rw,$fs,$fs,$zui-4,$di);
}

CSS

.block {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}