Open minhuaF opened 3 years ago
FlexBox Layout 旨在提供一种更加有效的方式来布局、对齐和分配容器中各个项目直接的空间，即使它们的大小未知或是动态改变的。
FlexBox Layout
FlexBox Layout 的主要思想是使容器能更改其项目的宽度/高度（和顺序），来最好地填充可用空间（主要是使用所有类型的显示设备和屏幕尺寸）。FLex容器会扩展项目以填充可用的可用空间，或收缩它们以防止溢出。
最重要的是，和常规布局（块是垂直的，内联是水平的）相比，flexbox布局与方向无关的。虽然方向这些功能在页面上工作的很好，但是常规布局缺乏支持大型或复杂应用程序的灵活性（特别是在改变方向、调整大小、拉伸、收缩等方面）。
flexbox
注意：Flexbox 布局最适合应用程序的组件和小规模布局，而Grid布局则用于较大规模的布局。
Flexbox
philipwalton/flexbugs
FlexBox Layout 从2017年出现以来，社区已经和完善，也有很多布道师发布了教程，借此记录下，下次有疑问的时候可以直接在这里找了
图解CSS：Flexbox布局(Part1) - 大漠老师对flex系列的讲解太棒了 A Complete Guide to Flexbox
背景
FlexBox Layout旨在提供一种更加有效的方式来布局、对齐和分配容器中各个项目直接的空间，即使它们的大小未知或是动态改变的。FlexBox Layout的主要思想是使容器能更改其项目的宽度/高度（和顺序），来最好地填充可用空间（主要是使用所有类型的显示设备和屏幕尺寸）。FLex容器会扩展项目以填充可用的可用空间，或收缩它们以防止溢出。最重要的是，和常规布局（块是垂直的，内联是水平的）相比，
flexbox布局与方向无关的。虽然方向这些功能在页面上工作的很好，但是常规布局缺乏支持大型或复杂应用程序的灵活性（特别是在改变方向、调整大小、拉伸、收缩等方面）。注意：
Flexbox布局最适合应用程序的组件和小规模布局，而Grid布局则用于较大规模的布局。属性使用（脑图）
社区整理的bugfix参考文档
philipwalton/flexbugs
参考文档
图解CSS：Flexbox布局(Part1) - 大漠老师对flex系列的讲解太棒了 A Complete Guide to Flexbox