常用布局

Position + display + float 兼容性好 效率低

flex布局

1. 容器 display: flex
   • flex-direction : row | roe-reverse | column | column-reverse // 排序方式
   • flex-wrap: wrap | nowrap | wrap-reverse // 元素换行
   • justify-content: flex-start | space-between | flex-end|center| baseline
   • align-items: center
   • align-content
2. 项目

   grid 布局