视野区域

Flexbox Layout(Flexible Box), 可以在子元素的大小未知的情况下, 对它们对齐和分配空间, 灵活的, 弹性的.

容器可以修改子元素的宽高和排序, 放大子元素以填充可用空间, 或缩小子元素防止溢出, 这样分配空间得以适用各种屏幕尺寸

Flexbox 没有方向限制(以往Block 只限于垂直方向, Inline 只能水平方向), 更灵活.

Flexbox 用于局部布局(某个组件, 小规模内容), Grid 用于全局布局

• 基本概念与术语
• 用于父元素的属性
• 用于子元素的属性

🌰:

• Flexbox 式垂直水平居中
• 自动换行, 对齐
• 小尺寸多行, 大尺寸一行
• 页眉页脚三列, 移动优先响应式布局

https://github.com/wangzhengya/cheatsheet