介绍
Flexbox 布局是一种基于弹性盒子模型的布局方式，可以使我们更方便、更灵活地进行页面布局。LESS 是一种动态样式语言，可以帮助我们更方便地编写 CSS 样式。本文将介绍如何在 LESS 中使用 flexbox 布局，包括一些常用的方法和技巧，以及示例代码。
基本语法
在 LESS 中使用 flexbox 布局，需要先定义一个容器，然后在容器中定义一些子元素，如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- ------- ------------ ------- - ----- - ----- -- -
上面的代码中，.container 是一个容器，使用 display: flex 属性来定义其为 flexbox 布局。flex-direction 属性用来设置主轴方向，可以是 row（水平方向）或 column（垂直方向）。justify-content 属性用来设置子元素在主轴上的对齐方式，可以是 flex-start、center、flex-end、space-between 和 space-around。align-items 属性用来设置子元素在交叉轴上的对齐方式，可以是 flex-start、center、flex-end、stretch 和 baseline。
.item 是容器中的子元素，使用 flex: 1 属性来设置其在主轴上的占比。如果有多个子元素，可以使用不同的 flex 值来设置它们的占比。
常用技巧
1. 自适应宽度
可以使用 flex: 1 来让子元素自适应宽度，如下所示：
.container {
display: flex;
}
.item {
flex: 1;
}上面的代码中，.item 的宽度会根据 .container 的宽度自适应。
2. 换行显示
当子元素的数量过多时，可以使用 flex-wrap: wrap 来让它们换行显示，如下所示：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
}上面的代码中，当子元素超出容器宽度时，会自动换行显示。
3. 垂直居中
可以使用 align-items: center 来让子元素垂直居中，如下所示：
.container {
display: flex;
align-items: center;
}
.item {
flex: 1;
}上面的代码中，.item 会在交叉轴上居中对齐。
4. 水平居中
可以使用 justify-content: center 来让子元素水平居中，如下所示：
.container {
display: flex;
justify-content: center;
}
.item {
flex: 1;
}上面的代码中，.item 会在主轴上居中对齐。
5. 水平居左/右
可以使用 justify-content: flex-start 或 justify-content: flex-end 来让子元素水平居左或居右，如下所示：
.container {
display: flex;
justify-content: flex-start;
}
.item {
flex: 1;
}上面的代码中，.item 会在主轴上靠左对齐。
6. 垂直居上/下
可以使用 align-items: flex-start 或 align-items: flex-end 来让子元素垂直居上或居下，如下所示：
.container {
display: flex;
align-items: flex-start;
}
.item {
flex: 1;
}上面的代码中，.item 会在交叉轴上靠上对齐。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- ------- ------------ ------- ---------- ----- - ----- - ----- -- ------- ------ ------- ----- ----------------- ----- ----------- ------- ------------ ------ -
上面的代码中，容器中包含多个子元素，使用 flex-wrap: wrap 让它们换行显示。每个子元素使用 flex: 1 来自适应宽度，并设置一些样式来展示效果。可以根据实际需求进行修改和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d93b06a941bf71340cb261
