Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

需要详细学习flex布局的可参考下面链接文章，相关基础和原理讲解的都比较清楚。

阮一峰讲解flex布局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

本文主要是把flex的各个属性制作成动画样式，让大家很清楚的看到每个属性使用后的样式，方便大家记忆理解，文章最后推荐“Flexbox布局语法速查手册”希望能帮到大家，强烈推荐小白收藏

display：

排序和排方向

flex-direction：

flex-wrap:

flex-flow:

order：

对齐

justify-content：

align-items：

align-self：

align-content：

伸缩

flex-grow：

flex-shrink：

flex-basis：

喜欢的老铁，加个关注！今后会分享更多的前端干货，欢迎点赞转发关注[比心][比心][比心]

附上Flexbox布局语法速查手册，超级好用！

https://www.webhek.com/apps/flex-cheatsheet/#align-self