弄懂 flex 布局

[minhuaF]

背景

FlexBox Layout 旨在提供一种更加有效的方式来布局、对齐和分配容器中各个项目直接的空间，即使它们的大小未知或是动态改变的。

FlexBox Layout 的主要思想是使容器能更改其项目的宽度/高度（和顺序），来最好地填充可用空间（主要是使用所有类型的显示设备和屏幕尺寸）。FLex容器会扩展项目以填充可用的可用空间，或收缩它们以防止溢出。

最重要的是，和常规布局（块是垂直的，内联是水平的）相比，flexbox布局与方向无关的。虽然方向这些功能在页面上工作的很好，但是常规布局缺乏支持大型或复杂应用程序的灵活性（特别是在改变方向、调整大小、拉伸、收缩等方面）。

注意：Flexbox 布局最适合应用程序的组件和小规模布局，而Grid布局则用于较大规模的布局。

属性使用（脑图）

社区整理的bugfix参考文档

philipwalton/flexbugs

参考文档

FlexBox Layout 从2017年出现以来，社区已经和完善，也有很多布道师发布了教程，借此记录下，下次有疑问的时候可以直接在这里找了

图解CSS：Flexbox布局(Part1) - 大漠老师对flex系列的讲解太棒了
A Complete Guide to Flexbox