译者：前端小智来源：dev作者：JoyShaheb有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。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/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
