伸缩布局（Flexbox）是一种基于 CSS3 的布局方式，它可以让我们更方便地实现响应式设计和自适应布局。在 LESS 中，我们可以使用内置的 Mixin 或自定义 Mixin 来实现伸缩布局。
使用内置 Mixin
LESS 内置了一些方便的 Mixin 来实现伸缩布局。下面是一些常用的 Mixin：
display
设置元素的 display 属性为 flex。
-------- - -------- ----- -
flex-direction
设置主轴的方向。
-------- - --------------- ---- -- ---- --------------- ------- -- ---- -
justify-content
设置主轴上的对齐方式。
-------- - ---------------- ----------- -- --- ---------------- --------- -- --- ---------------- ------- -- ---- ---------------- -------------- -- ---- ---------------- ------------- -- ---- -
align-items
设置交叉轴上的对齐方式。
-------- - ------------ ----------- -- --- ------------ --------- -- --- ------------ ------- -- ---- ------------ --------- -- ---- ------------ -------- -- ---- -
flex-wrap
设置超出容器宽度时，是否换行。
-------- - ---------- ------- -- --- ---------- ----- -- -- ---------- ------------- -- ---- -
flex-grow
设置元素在伸缩容器中的放大比例。
---------- - ---------- -- -
flex-shrink
设置元素在伸缩容器中的缩小比例。
---------- - ------------ -- -
flex-basis
设置元素在伸缩容器中的初始大小。
---------- - ----------- ------ -
flex
同时设置 flex-grow、flex-shrink 和 flex-basis。
---------- - ----- - - ------ -
自定义 Mixin
除了使用内置 Mixin，我们还可以自定义 Mixin 来实现更复杂的伸缩布局。下面是一个示例：
-------------------- ---- --------- ----------- ------- -------- - -------- ----- --------------- ----------- ---------------- --------- ------------ ------- -
这个 Mixin 可以接受三个参数：主轴方向、主轴对齐方式和交叉轴对齐方式。使用时，只需要传入需要的参数即可。
------------- -------------- --------
总结
LESS 中实现伸缩布局，既可以使用内置 Mixin，也可以自定义 Mixin。通过灵活使用 Mixin，我们可以更方便地实现复杂的伸缩布局，提高开发效率。
示例代码
-------- - -------- ----- --------------- ---- ---------------- -------------- ------------ ------- - ---------- - ----- - - ------ -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656d79f0d2f5e1655d5bbe4c