单列布局是目前运用最为广泛的布局之一，因其结构清晰、一目了然、无论屏幕大小都能获得较为一致的等优点深受大家喜爱。

接下来我们一起来看一看抽象模式的单列布局长什么样。

抽象成极简形式的单列布局长这样：

单列布局通常用于等引导，陈列展示各种信息，点击后便至具体的详情。

由于单列布局过于简单，并且可以用居中布局来进行代替，所以 并没有去实现这个布局。
不过这难不倒动手能力很强的我们，咱们一起来用各式各样、形态各异的 CSS 技术手工打造单列布局：