14 张有趣深动图解 FlexBox，好家伙，还不快进收藏夹吃灰！
译者：前端小智
来源: dev
作者：Joy Shaheb
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。2021 年了，我们在来重新复习一下 flexbox 的用法，还有一些用的比较少的属性，方便大家理解，这里使用有趣的图片来讲解。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
FlexBox 架构
文章图片
FlexBox图表
文章图片
flex-direction
flex-item在flex-container内部分布的行/列方向。
文章图片
文章图片
justify-content
justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
文章图片
文章图片
align-content
align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
文章图片
文章图片
文章图片
align-items 和
justify-content不同的是，align-items主要是垂直方向的对齐方式，属性介绍：flex-start、flex-end、center、initial、inherit。
文章图片
align-content 和 align-items 区别：
align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置对齐，下对齐拉伸以及平均分配剩下空间等属性值。- 总结就是单行找
align-items多行找align-content。
文章图片
flex - grow | shrink | wrap
- flex-grow : 根据flex容器的宽度来增加
flex-item的大小。 - flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
- flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
文章图片
文章图片
简写
文章图片
- flex:它是flex-grow， flex-shrink和flex-basis组合的简写。
- flex-basis：这类似于为
flex-item添加宽度，只是更加灵活。flex-basis: 10em它将弹性项目的初始大小设置为10em，其最终大小将取决于可用空间，flex-grow和flex-shrink。
文章图片
完~，我是小智，我要去刷碗了，我们下期见！
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://dev.to/joyshaheb/flex...
交流
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。【14 张有趣深动图解 FlexBox，好家伙，还不快进收藏夹吃灰！】
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
推荐阅读
- D13|D13 张贇 Banner分析
- 从我的第一张健身卡谈传统健身房
- 刘婵为何不娶关羽的女儿为妻子，而为何要娶张飞的两个女儿
- 简单心理2019春A期+32+张荣
- 工具分享｜5个有趣好玩的网站，拒绝无聊！
- 夜场
- 补
- ?钱塘张氏先祖墓志铭
- 慌慌张张的2020年，再见啦！
- 【图解】9张图彻底搞懂堆排序