多列等宽高度不固定的几种css布局（文档流、浮动、瀑布流、flex、flexbox）
程序员文章站
2024-01-28 19:55:29
...
文档流布局
这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，这个相信大家都比较熟悉了，就不再赘述了。
效果图（左）：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layouts</title>
<style>
html,body,div,ul,li {
padding: 0;
margin: 0;
}
.contaner {
}
.item {
font-size: 40px;
width: calc((100% - 40px)/3);
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.item:nth-child(3n - 1) {
padding:0 20px;
}
</style>
</head>
<body>
<ul class="contaner">
<li class="item"><div style="height: 160px;background: #ff2714;">1</div></li>
<li class="item"><div style="height: 285px;background: #28a627;">2</div></li>
<li class="item"><div style="height: 216px;background: #40526f;">3</div></li>
<li class="item"><div style="height: 466px;background: #b78100;">4</div></li>
<li class="item"><div style="height: 180px;background: #e37eff;">5</div></li>
<li class="item"><div style="height: 260px;background: #67a3ff;">6</div></li>
<li class="item"><div style="height: 384px;background: #e5ff30;">7</div></li>
<li class="item"><div style="height: 196px;background: #ff1a2c;">8</div></li>
<li class="item"><div style="height: 435px;background: #4cffd6;">9</div></li>
<li class="item"><div style="height: 520px;background: #00ff2f;">10</div></li>
<li class="item"><div style="height: 354px;background: #93ffc5;">11</div></li>
<li class="item"><div style="height: 296px;background: #ffb74a;">12</div></li>
<li class="item"><div style="height: 135px;background: #7400ff;">13</div></li>
<li class="item"><div style="height: 520px;background: #d7ff1f;">14</div></li>
</ul>
</body>
</html>注意：文档流布局的情况下如果第三列掉下来了多半是因为每个 li 标签之间换行时导致的间隙，解决办法如下去掉换行
<ul class="contaner">
<li class="item"><div style="height: 160px;background: #ff2714;">1</div></li><li class="item">
<div style="height: 285px;background: #28a627;">2</div></li><li class="item">
<div style="height: 216px;background: #40526f;">3</div></li><li class="item">
<div style="height: 466px;background: #b78100;">4</div></li><li class="item">
<div style="height: 180px;background: #e37eff;">5</div></li><li class="item">
<div style="height: 260px;background: #67a3ff;">6</div></li><li class="item">
<div style="height: 384px;background: #e5ff30;">7</div></li><li class="item">
<div style="height: 196px;background: #ff1a2c;">8</div></li><li class="item">
<div style="height: 435px;background: #4cffd6;">9</div></li><li class="item">
<div style="height: 520px;background: #00ff2f;">10</div></li><li class="item">
<div style="height: 354px;background: #93ffc5;">11</div></li><li class="item">
<div style="height: 296px;background: #ffb74a;">12</div></li><li class="item">
<div style="height: 135px;background: #7400ff;">13</div></li><li class="item">
<div style="height: 520px;background: #d7ff1f;">14</div></li>
</ul>浮动布局
浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。这个大家也比较熟悉，就不再赘述了。
效果图：
css样式代码：
<style>
html,body,div,ul,li {
padding: 0;
margin: 0;
}
.contaner {
}
.item {
font-size: 40px;
width: calc((100%)/3);
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
.item:nth-child(3n - 1) {
padding:0 10px;
}
</style>瀑布流布局
以前要实现瀑布流布局要依赖于JavaScript来实现，比如Masonry、Isotope等都是非常有名的插件。随着css技术的更新现在有很多新的方法来实现纯css瀑布流布局了。比如多列布局multi-columns、Flexbox布局以及Grid布局，废话不多说上效果图。
1.multi-columns布局
效果图：
css代码：
<style>
html,body,div,ul,li {
padding: 0;
margin: 0;
}
.contaner {
column-count: 3; /*css3新增，把contaner容器中的内容分为三列*/
column-gap: 20px; /*定义列之间的间隙为20px*/
}
.item {
font-size: 40px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
counter-increment: item-counter;
}
</style>2.Flexbox布局
flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到大多数主流浏览器的支持,Flex布局将成为未来布局的首选方案。
css代码：
<style>
html,body,div,ul,li {
padding: 0;
margin: 0;
}
.contaner {
display: flex;
justify-content:space-between;
flex-wrap: wrap;
align-items: center; /*item内容垂直居中*/
}
.item {
font-size: 40px;
width: calc((100% - 40px)/3);
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.item:nth-child(3n - 1) {
padding:0 20px;
}
</style>上一篇： C语言时间函数介绍