CSS 布局大比拼：浮动、Flex、Grid 实战对比，看完就知道该用哪个！
|
admin
2025年9月22日 15:27
本文热度 1160
|
前端开发中，页面布局一直都是基础，在CSS广泛使用之前大部分布局是使用的table布局，CSS流行后，CSS布局一直是布局核心技能之一。随着CSS技术的不断发展，我们经历了从浮动到Flexbox再到Grid的演进过程。面对这三种主流的布局方案，很多开发者都会疑惑：到底该选择哪种布局方式？今天我们从几个简单的例子来分别用不同的布局实现一下，就来一场实战对比，让你彻底搞清楚！
我们先看看一个简单的布局，一个盒子里面包含三个盒子，需要两边对齐，中间间距均等分；
首先出场的是“浮动布局”：
浮动布局曾是Web布局的唯一选择，虽然现在略显老态，但仍有其适用场景，而且简单容易上手。
<style>.container { overflow: hidden; width: 700px; border: 5px solid #000; padding: 20px;}.box { float: left; width: 200px; height: 100px; margin-right:50px; box-sizing: border-box; background-color: orange;}.box:last-child { margin-right:0px ;}.clearfix::after { content: ""; display: table; clear: both;} </style><div class="container"> <div class="box">
</div> <div class="box">
</div> <div class="box">
</div></div>
Flexbox布局为的一维布局提供了完美的解决方案，让我们能够轻松实现元素的弹性排列。<style>.container { width: 700px; border: 5px solid #000; padding: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}.box { width: 200px; height: 100px; box-sizing: border-box; background-color: orange;}</style>
<div class="container"> <div class="box">
</div> <div class="box">
</div> <div class="box">
</div></div>
CSS Grid布局是专门为二维布局设计的革命性技术，可以同时处理行和列的布局。<style>.container { width: 700px; border: 5px solid #000; padding: 20px; display: grid; grid-template-columns: repeat(3, 200px); justify-content: space-between; }.box { width: 200px; height: 100px; box-sizing: border-box; background-color: orange;}</style><div class="container"> <div class="box">
</div> <div class="box">
</div> <div class="box">
</div></div>
- 浮动布局相对好理解，需要间隔多少，直接给出值，但是需要清除浮动，否则会导致布局塌陷，实现复杂布局时代码冗长；因为值比较固定所以响应式适配需要大量媒体查询，比较适合简单网格布局、文字环绕图片等传统布局需求。
- flex布局代码比较少，对于这种横向布局方式，比较简单，如果要实现元素的垂直居中，左右居中都很方便，元素顺序可灵活调整，强大的空间分配能力。
- Grid布局在这个例子中和flex布局区别不太大，没有明显的优势。
当然，平时我们这三种并不是互相排斥的，是可以结合起来用的，grid可以用来做整体页面布局或者是复杂的网格布局，flex特别适合组件内部布局。<style>.page { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; border: 2px solid #00ff00;}
.nav { height: 100vh; display: flex; flex-direction: column; align-items: center; border: 2px solid #ff00ff;}
.box { width: 200px; height: 100px; border: 1px solid #000; box-sizing: border-box; background-color: orange;}
.card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; border: 2px solid #00ffff;}
.card { display: flex; flex-direction: column; border: 2px solid #0000ff;}</style><div class="page"> <div class="nav"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="card-container"> <div class="card">
</div> <div class="card">
</div> <div class="card">
</div> <div class="card">
</div> <div class="card">
</div> </div></div>
现代前端开发中，推荐以Grid为主力布局工具，Flexbox作为补充，浮动布局仅用于特定场景。掌握这三种技术，并根据实际需求灵活选择，是你成为CSS高手的关键！
阅读原文：点击这里
该文章在 2025/9/22 15:27:57 编辑过
400 186 1886
