多列等宽高度不固定的几种css布局（文档流、浮动、瀑布流、flex、flexbox）

文档流布局

这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，这个相信大家都比较熟悉了，就不再赘述了。

效果图（左）：

              

代码：

  
  
  



  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14

注意：文档流布局的情况下如果第三列掉下来了多半是因为每个 li 标签之间换行时导致的间隙，解决办法如下去掉换行

  
1

  
2

  
3

  
4

  
5

  
6

  
7

  
8

  
9

  
10

  
11

  
12

  
13

  
14

浮动布局

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。这个大家也比较熟悉，就不再赘述了。

效果图：

css样式代码：

瀑布流布局

以前要实现瀑布流布局要依赖于JavaScript来实现，比如Masonry、Isotope等都是非常有名的插件。随着css技术的更新现在有很多新的方法来实现纯css瀑布流布局了。比如多列布局multi-columns、Flexbox布局以及Grid布局，废话不多说上效果图。

1.multi-columns布局

效果图：

css代码：

2.Flexbox布局

flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到大多数主流浏览器的支持,Flex布局将成为未来布局的首选方案。

 

css代码：