伸缩布局（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，我们可以更方便地实现复杂的伸缩布局，提高开发效率。
示例代码
-- -------------------- ---- ------- -------- - -------- ----- --------------- ---- ---------------- -------------- ------------ ------- - ---------- - ----- - - ------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656d79f0d2f5e1655d5bbe4c