乐趣区

关于html:14-张有趣深动图解-FlexBox好家伙还不快进收藏夹吃灰

jiezi

译者：前端小智
起源: dev
作者：Joy Shaheb

点赞再看 ，微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

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/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版