译者：前端小智
起源: dev
作者：Joy Shaheb
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

2021 年了，咱们在来从新温习一下 flexbox 的用法，还有一些用的比拟少的属性，不便大家了解，这里应用乏味的图片来解说。

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。

align-self

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...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。