弹性布局就是使用Flex来进行布局，这是CSS3的一种新的布局方式，相较于浮动布局以及定位布局，弹性布局在开发效率以及维护性上都远胜与前两者。
Flex全称为Flexible Box，因此也被称之为弹性盒子。
学习弹性布局最主要的还是要由两个方面入手
弹性盒子
弹性元素
弹性盒子即是被设置成display:fiex;的盒子元素，而弹性元素则是指被弹性盒子包裹的元素，一个大的弹性盒子中可以包含多个小的弹性盒子。
我们可以控制弹性盒子中弹性元素的排列方式，也可以单独的为弹性元素进行区域的划分，排列方式的改变等等，总之来说就是非常方便，非常牛逼。
弹性盒子
我们可以使用display:flex;以及display:inline-flex;来声明一个元素为弹性盒子。
flex的弹性盒子其实是独占一行的。相当于block块元素，默认其中的弹性元素全部变为inline-block状态。
而inline-flex的弹性盒子并非类似block块元素，而是类似于inline-block内联块级元素，默认其中的弹性元素全部变为inline-block状态。
flex
盒子本身：类似于block块元素独占一行
弹性元素：全部变为inline-block内联块级元素
inline-flex
盒子本身：类似于inline-block内联块级元素，不会独占一行
弹性元素：全部变为inline-block内联块级元素
flex盒子本身，红色区域，独占一行。
盒子元素，蓝色区域，由原本的block状态变为类似于inline-block状态
inline-flex盒子本身，红色区域，不独占一行
盒子元素，蓝色区域，由原本的block状态变为类似于inline-block状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> main{ /* display: flex; */ display: inline-flex; } main div{ background: blueviolet content-box; box-sizing: border-box; padding: 5px; } </style> </head> <body> <main> <div>小猪佩奇</div> <div>光头强</div> <div>喜羊羊</div> </main> </body> </html>