css - CSS Shorthand methods for Display Flex and Flex Direction

Question

Is there a short hand method in CSS to combine

display:flex;
flex-direction: row / column?

into one line instead of two?

I know flex-flow, does flex-direction and flex wrap.

标签： csssass

Answer 1

我不知道你是否精通 Sass，但是如果你精通，这是一种让你的想法发挥作用的快速方法，你也可以进一步完善这个@if语句和@error指令，但这里是快速简单的方法：

这是一个Codepen来演示。

混合：_

@mixin fd($flex, $direction) {
  display: $flex;
  flex-direction: $direction;
}

这是您包含它的方式：

@include fd([display], [direction]);

.flex-1 {
  @include fd(flex, row);
  // whatever goes next
}

.flex-2 {
  @include fd(inline-flex, column);
  // whatever goes next
}

这是它编译为：

.flex-1 {
  display: flex;
  flex-direction: row;
}

.flex-2 {
  display: inline-flex;
  flex-direction: column;
}