LESS 中如何实现伸缩布局？

伸缩布局（Flexbox）是一种基于 CSS3 的布局方式，它可以让我们更方便地实现响应式设计和自适应布局。在 LESS 中，我们可以使用内置的 Mixin 或自定义 Mixin 来实现伸缩布局。

使用内置 Mixin

LESS 内置了一些方便的 Mixin 来实现伸缩布局。下面是一些常用的 Mixin：

display

设置元素的 display 属性为 flex。

.flexbox {
  display: flex;
}

flex-direction

设置主轴的方向。

.flexbox {
  flex-direction: row; // 水平方向
  flex-direction: column; // 垂直方向
}

justify-content

设置主轴上的对齐方式。

.flexbox {
  justify-content: flex-start; // 左对齐
  justify-content: flex-end; // 右对齐
  justify-content: center; // 居中对齐
  justify-content: space-between; // 两端对齐
  justify-content: space-around; // 均匀分布
}

align-items

设置交叉轴上的对齐方式。

.flexbox {
  align-items: flex-start; // 上对齐
  align-items: flex-end; // 下对齐
  align-items: center; // 居中对齐
  align-items: baseline; // 基线对齐
  align-items: stretch; // 均分高度
}

flex-wrap

设置超出容器宽度时，是否换行。

.flexbox {
  flex-wrap: nowrap; // 不换行
  flex-wrap: wrap; // 换行
  flex-wrap: wrap-reverse; // 反向换行
}

flex-grow

设置元素在伸缩容器中的放大比例。

.flex-item {
  flex-grow: 1;
}

flex-shrink

设置元素在伸缩容器中的缩小比例。

.flex-item {
  flex-shrink: 1;
}

flex-basis

设置元素在伸缩容器中的初始大小。

.flex-item {
  flex-basis: 100px;
}

flex

同时设置 flex-grow、flex-shrink 和 flex-basis。

.flex-item {
  flex: 1 1 100px;
}

自定义 Mixin

除了使用内置 Mixin，我们还可以自定义 Mixin 来实现更复杂的伸缩布局。下面是一个示例：

.flexbox(@direction: row, @justify: flex-start, @align: stretch) {
  display: flex;
  flex-direction: @direction;
  justify-content: @justify;
  align-items: @align;
}

这个 Mixin 可以接受三个参数：主轴方向、主轴对齐方式和交叉轴对齐方式。使用时，只需要传入需要的参数即可。

.flexbox(row, space-between, center);

总结

LESS 中实现伸缩布局，既可以使用内置 Mixin，也可以自定义 Mixin。通过灵活使用 Mixin，我们可以更方便地实现复杂的伸缩布局，提高开发效率。

示例代码

// javascriptcn.com 代码示例
.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex: 1 1 100px;
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d79f0d2f5e1655d5bbe4c