CSS Flexbox 是前端开发中常用的布局方式之一，它能够让我们更方便地实现响应式布局和弹性布局。在这篇文章中，我们将介绍一些你可能不知道的 CSS Flexbox 技巧，帮助你更好地理解和应用 Flexbox。
1. 使用 flex-basis 来设置项目的初始大小
flex-basis 属性用于设置项目在主轴方向上的初始大小。默认情况下，项目的大小是由它的内容决定的，但是有时候我们希望项目在初始状态下具有一定的大小。比如，我们希望一个按钮在未被点击时具有固定的宽度，但是在被点击后可以根据内容自适应宽度。这时候，我们可以使用 flex-basis 来设置按钮的初始宽度。
------ - ----------- ------ -
2. 使用 flex-shrink 来控制项目的收缩比例
flex-shrink 属性用于控制项目在空间不足时的收缩比例，默认值为 1。如果一个容器中的所有项目都设置了 flex-shrink，那么当容器的宽度变小时，每个项目会按照它们的 flex-shrink 值进行收缩。比如，一个容器中有两个项目，它们的 flex-shrink 值分别为 1 和 2，当容器的宽度变小时，第一个项目会收缩 1/3 的宽度，第二个项目会收缩 2/3 的宽度。
---------- - -------- ----- - ----- - ------------ -- - ------------------ - ------------ -- -
3. 使用 flex-grow 来控制项目的扩展比例
flex-grow 属性用于控制项目在空间充足时的扩展比例，默认值为 0。如果一个容器中的所有项目都设置了 flex-grow，那么当容器的宽度变大时，每个项目会按照它们的 flex-grow 值进行扩展。比如，一个容器中有两个项目，它们的 flex-grow 值分别为 1 和 2，当容器的宽度变大时，第一个项目会扩展 1/3 的宽度，第二个项目会扩展 2/3 的宽度。
---------- - -------- ----- - ----- - ---------- -- - ------------------ - ---------- -- -
4. 使用 align-self 来控制项目在交叉轴上的对齐方式
align-self 属性用于控制项目在交叉轴上的对齐方式。默认情况下，项目会继承容器的 align-items 属性，但是有时候我们希望某个项目有自己的对齐方式。比如，我们希望一个图片在容器中垂直居中，但是其他项目不需要垂直居中。这时候，我们可以使用 align-self 来设置该图片的对齐方式。
---------- - -------- ----- ------------ ------- - ----- - ----------- ------- - ----- --- - ---------- ----- ------- ----- -
5. 使用 order 来控制项目的顺序
order 属性用于控制项目的顺序。默认情况下，项目的顺序是按照它们在 HTML 中的顺序排列的，但是有时候我们希望某些项目在视觉上排在前面或后面。比如，我们希望一个导航菜单在移动端显示在页面底部，这时候我们可以使用 order 来将导航菜单放在最后面。
---------- - -------- ----- --------------- ------- - ---- - ------ -- - -------- - ------ -- -
结论
以上就是一些你可能不知道的 CSS Flexbox 技巧，它们能够帮助你更好地掌握 Flexbox，并应用于实际开发中。需要注意的是，这些技巧并不是必须掌握的，而是在特定情况下使用的工具。如果你有其他有用的 Flexbox 技巧，欢迎在评论区分享。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673d4e64bdc541352e3700a7