14 张有趣深动图解 FlexBox ！

水深无声 2023-01-11 08:29 78阅读 0赞

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

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：https://github.com/qq449245884/vue-okr-tree**

2021 年了，我们在来重新复习一下 flexbox 的用法，还有一些用的比较少的属性，方便大家理解，这里使用有趣的图片来讲解。

## FlexBox 架构 ##

![c99a8d81c604ecea218cd48bfcbeaa35.png][]

## FlexBox图表 ##

![1dd993ac447b2f392f44586bef6cc423.png][]

## flex-direction ##

`flex-item`在`flex-container`内部分布的行/列方向。

![c01bf12480cacaa1f9391e4fde115120.png][]

![eb86f70d77189a94ee40f9b6c0340d15.png][]

## justify-content ##

`justify-content`用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

![c86e07f4a5da9377eff21e5bdd4b91c9.png][]

![f19e0df82a576a097b69ef5ce4d2d3ad.png][]

## align-content ##

`align-content` 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

![d0ef839d1dedd19564659f1c0d4d8f36.png][]

![80075a2a656d321fb2ae002cfbddf602.png][]

![247f55d08478608c81011c9bc304798d.png][]

## align-items ##

和`justify-content`不同的是，`align-items`主要是垂直方向的对齐方式，属性介绍：`flex-start`、`flex-end`、`center`、`initial`、`inherit`。

![690abbea1ee8685252017663ef2ba302.png][]

**align-content 和 align-items 区别：**

*  `align-items` 适用于单行情况下，只有上对齐，下对齐，居中和拉伸
 *  `align-content` 适应于换行(多行)的情况下(单行情况下无效)，可以设置对齐，下对齐拉伸以及平均分配剩下空间等属性值。
 *  总结就是单行找 `align-items` 多行找 `align-content`。

## align-self ##

![b305fb254c439c3e863d0245c52e758d.png][]

## flex - grow | shrink | wrap ##

*  **flex-grow :** 根据flex容器的宽度来增加`flex-item`的大小。
 *  **flex-shrink** 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 **flex-shrink** 的值。
 *  **flex-wrap** 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Go640ub5-1611621233326)(/img/bVcNNly)\]![41f5ebbd55f409eed6ff0de2168b2a0e.png][]

![722d98b527e2c01f291ecdb5b8d53c58.png][]

## 简写 ##

*  **flex**:它是**flex-grow**， **flex-shrink**和**flex-basis**组合的简写。
 *  **flex-basis**：这类似于为`flex-item`添加宽度，只是更加灵活。`flex-basis: 10em`它将弹性项目的初始大小设置为`10em`，其最终大小将取决于可用空间，`flex-grow`和`flex-shrink`。

![872e80b527b53372a1ca813897c5465b.png][]

完~，我是小智，我要去刷碗了，我们下期见！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dev.to/joyshaheb/flexbox-sheets-in-2021-css-2021-3edl

### 交流 ###

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[c99a8d81c604ecea218cd48bfcbeaa35.png]: /images/20221119/8a507a8906894bd9be17c24d390ddb0d.png
[1dd993ac447b2f392f44586bef6cc423.png]: https://img-blog.csdnimg.cn/img_convert/1dd993ac447b2f392f44586bef6cc423.png
[c01bf12480cacaa1f9391e4fde115120.png]: https://img-blog.csdnimg.cn/img_convert/c01bf12480cacaa1f9391e4fde115120.png
[eb86f70d77189a94ee40f9b6c0340d15.png]: https://img-blog.csdnimg.cn/img_convert/eb86f70d77189a94ee40f9b6c0340d15.png
[c86e07f4a5da9377eff21e5bdd4b91c9.png]: https://img-blog.csdnimg.cn/img_convert/c86e07f4a5da9377eff21e5bdd4b91c9.png
[f19e0df82a576a097b69ef5ce4d2d3ad.png]: https://img-blog.csdnimg.cn/img_convert/f19e0df82a576a097b69ef5ce4d2d3ad.png
[d0ef839d1dedd19564659f1c0d4d8f36.png]: https://img-blog.csdnimg.cn/img_convert/d0ef839d1dedd19564659f1c0d4d8f36.png
[80075a2a656d321fb2ae002cfbddf602.png]: https://img-blog.csdnimg.cn/img_convert/80075a2a656d321fb2ae002cfbddf602.png
[247f55d08478608c81011c9bc304798d.png]: https://img-blog.csdnimg.cn/img_convert/247f55d08478608c81011c9bc304798d.png
[690abbea1ee8685252017663ef2ba302.png]: https://img-blog.csdnimg.cn/img_convert/690abbea1ee8685252017663ef2ba302.png
[b305fb254c439c3e863d0245c52e758d.png]: https://img-blog.csdnimg.cn/img_convert/b305fb254c439c3e863d0245c52e758d.png
[41f5ebbd55f409eed6ff0de2168b2a0e.png]: https://img-blog.csdnimg.cn/img_convert/41f5ebbd55f409eed6ff0de2168b2a0e.png
[722d98b527e2c01f291ecdb5b8d53c58.png]: https://img-blog.csdnimg.cn/img_convert/722d98b527e2c01f291ecdb5b8d53c58.png
[872e80b527b53372a1ca813897c5465b.png]: https://img-blog.csdnimg.cn/img_convert/872e80b527b53372a1ca813897c5465b.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi