本文已获得原作者JoyShaheb授权翻译。2021年了，再回顾一下flexbox的用法，还有一些属性用的比较少，让大家了解一下。这里我们用有趣的图片来解释。FlexBoxArchitectureFlexBoxDiagramflex-direction弹性项目在弹性容器内分布的行/列方向。justify-contentjustify-content用于设置或获取弹框元素在主轴（横轴）方向的对齐方式。在内容项之间和周围分配空间。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。完成~，我是小智，我去洗碗了，下次见！译者：FrontendXiaozhi来源：dev作者：JoyShaheb2021-css-2021-3edl本文转载自微信公众号“大招天下”，可通过以下二维码关注。转载本文请联系大千世界公众号。
