译者：前端小智出处：dev作者：JoyShaheb喜欢再看一遍，微信搜索【大千世界】，关注B站【前端小智】，这个没有大厂背景，而是有着积极心态的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。Github地址：https://github.com/qq44924588...2021年了，我们来回顾一下flexbox的用法。还有一些属性用的比较少，方便大家理解。这里我们用有趣的图片来解释。FlexBoxArchitectureFlexBoxDiagramflex-direction弹性项目在弹性容器内分布的行/列方向。justify-contentjustify-content用于设置或获取flexbox元素在主轴（横轴）方向的对齐方式。在内容项之间和周围分配空间。align-items和justify-content的区别在于align-items主要是垂直对齐方式，引入属性：flex-start、flex-end、center、initial、inherit。align-content和align-items的区别：align-items适用于单行情况，只做顶部对齐、底部对齐、居中和拉伸。设置对齐、底部对齐、拉伸、均匀分配剩余空间等属性值。总结就是一行查找align-items，多行查找align-content。align-selfflex-成长|收缩|wrapflex-grow：根据弹性容器的宽度增加弹性项目的大小。flex-shrink属性指定了flex元素的收缩规则。flex元素只有在默认宽度之和大于容器时才会收缩，收缩的大小取决于flex-shrink的值。flex-wrap指定flex元素应该显示在单行还是多行。如果允许换行，则此属性允许您控制线条的堆叠方向。flex的简写：是flex-grow、flex-shrink和flex-basis组合的简写。flex-basis：这类似于给flex-item添加宽度，只是更灵活。flex-basis:10em将flex项目的初始大小设置为10em，其最终大小将取决于可用空间、flex-grow和flex-shrink。完成~，我是小智，我去洗碗了，下次见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://dev.to/joyshaheb/flex...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。
