hi，朋友，您来啦。带上小板凳，我们一起瞅一瞅今天的话题。

前言

Flex弹性布局是目前Web开发领域，广泛应用且备受欢迎的一种布局技术。它以其卓越的灵活性和便捷性，极大地赋能了Web开发者，使得他们，在进行页面或组件的UI布局设计时，能够更加游刃有余，极大地提升了，布局设计的效率和自由度。

Flex是什么？

Flex布局，也称为弹性布局，其核心原理，是将容器内的元素，以一条主轴和一条交叉轴为基础，进行定位与排布。一旦我们将容器的display属性设置为flex，那么就可以通过灵活调整主轴和交叉轴的方向及伸缩性，以实现元素在二维空间内的高效布局。

1、轴的应用

1.1、flex-direction属性，设置主轴的方向。

2、基础知识

2.1、justify-content属性，设置主轴上子项目排列或分布方式。

主轴方向不变时

主轴方向水平垂直变更时

主轴水平方向正反变更时

主轴垂直方向正反变更时

2.2、align-items属性，设置单行项目在交叉轴方向上的对齐方式。

主轴水平方向时

主轴垂直方向时

2.3、align-content属性，多行项目在交叉轴方向上的对齐方式。

主轴水平方向时

主轴垂直方向时

2.4、flex-wrap属性，设置是否换行。

铺满时是否自动换行

2.5、flex-grow子项属性，设置剩余空间充足时子项目是否放大。

2.6、flex-shrink子项属性，设置剩余空间不足时子项目是否缩小。

2.7、flex-basis子项属性，设置项目在主轴方向的初始大小。默认是auto，即按照元素自身的宽度或高度来进行计算。

关注作者：关注有趣的可视化设计器。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，让我们一起加油吧。