按我的经验在样式规律上大致分下类吧，

1. 等宽弹性布局
2. 单元素弹性布局
3. 多元素定比弹性布局
4. 等隙布局

用 flex 或 grid 能非常轻松的完成以上效果，而 css2 时代多半还需要更多元素嵌套才能完成了。

所谓弹性，即父级宽度变化子级宽度也会相应变化，
最基本的当然是百分比啦，
但当存在有定宽兄弟元素时，事情变得稍复杂了一点，便有了上述 2 3 的分类，
当间隙不为定值也要自动变化时，那便是第 4 分类了。

• 弹性布局指弹性盒子即Flex布局
• Flex布局元素可分为容器与容器成员，他们分别有些属性
• 首先要在容器属性上display: flex;声明弹性盒子
• 容器属性
  • flex-deriction: row(默认) | column | row-reverse | column-reverse (声明对齐方式，即声明主轴的方向)
  • flex-wrap: no-wrap(默认) | wrap | wrap-reverse (声明在主轴的换行方式)
  • flex-flow: || (简写)
  • justify-content: flex-start(默认) | flex-end | center | space-arround | space-between (项目在主轴上的对齐方式)
  • align-items: flex-start(默认) | flex-end | center | baseline | stretch (项目在交叉轴的对齐方式)
  • align-content: flex-start(默认) | flex-end | center | space-arround | space-between | stretch (存在多条主轴时，多根轴线的对齐方式)
• 项目属性
  • order: [Number] (定义项目的排序，数值越小，越靠前)
  • flex-grow: [Number] (定义项目的放大比例，默认是0，即存在剩余空间，也不放大)
  • flex-shrink: [Number] (定义项目的缩小比例，默认是1,即剩余空间不足，该项目缩小)
  • flex-basis: [Length] | auto(默认) (定义项目在分配剩余空间前，占据的主轴空间)
  • flex: (前面三个属性的缩写，默认值是1 0 auto)
  • align-self: flex-start | flex-end | center | baseline | stretch | auto(默认) (此项目在交叉轴的对齐方式)