2021 年了，我们在来重新复习一下 flexbox 的用法，还有一些用的比较少的属性，方便大家理解，这里使用有趣的图片来 讲解 。
FlexBox 架构
FlexBox图表
flex-direction
flex -i tem 在 flex-cont ai ner 内部分布的行/列 方向 。
justify-content
justify-content 用于设置或检索弹性 盒子 元素在主轴（横轴）方向上的对齐方式
align-content
align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
align- IT ems
和 justify-content 不同的是， align-items 主要是垂直方向的对齐方式，属性介绍： flex -s tart 、 flex-end 、 center 、 initial 、 inherit 。
align-content 和 align-items 区别：
align-items 适用于单行情况下，只有上对齐，下对齐，居中和拉伸 align-content 适应于换行(多行)的情况下(单行情况下无效)，可以设置对齐，下对齐拉伸以及平均分配剩下空间等属性值。 总结就是单行找 align-items 多行找 align-content 。align-self
flex - grow | s hr ink | wrap
flex-grow : 根据flex容器的 宽 度来增加 flex-item 的大小。
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的 堆叠 方向。
[ 外链 图片转存失败, 源 站可能有 防盗 链机制,建议将图片保存下来直接上传( img -Go640 ub 5-1611621233326)(/img/bVcNNly)]
简写
flex :它是 flex-grow ， flex-shrink 和 flex-basis 组合的简写。
flex-basis ：这类似于为 flex-item 添加宽度，只是更加灵活。 flex-basis: 10em 它将弹性项目的初始大小设置为 10em ，其最终大小将取决于可用空间， flex-grow 和 flex-shrink 。
原文地址：https://dev.to/joyshaheb/flexbox-sheets-in-2021-css-2021-3edl
作者：Joy Shaheb
译文地址：https://segmentfault .COM /a/1190000038998136
更多计算机编程相关知识，请访问：编程教学！！
以上就是通过14张有趣生动的图片来 了解 flexbox 的用法（值得收藏）的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 通过14张有趣生动的图片来了解 flexbox 的用法（值得收藏） 全部内容，希望文章能够帮你解决 通过14张有趣生动的图片来了解 flexbox 的用法（值得收藏） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于通过14张有趣生动的图片来了解 flexbox 的用法（值得收藏）的详细内容...