布局方式

静态布局

定位布局 position

弹性布局 flex

❓ flex: 1 表示什么意思？
💬 flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex-grow: 1 该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。
flex-shrink: 1 该属性默认为 1 ，如果空间不足，元素缩小。
flex-basis: 0% 该属性定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值

浮动布局 float