前端開發(fā)中，頁(yè)面布局一直都是基礎(chǔ)，在CSS廣泛使用之前大部分布局是使用的table布局，CSS流行后，CSS布局一直是布局核心技能之一。隨著CSS技術(shù)的不斷發(fā)展，我們經(jīng)歷了從浮動(dòng)到Flexbox再到Grid的演進(jìn)過程。面對(duì)這三種主流的布局方案，很多開發(fā)者都會(huì)疑惑：到底該選擇哪種布局方式？今天我們從幾個(gè)簡(jiǎn)單的例子來分別用不同的布局實(shí)現(xiàn)一下，就來一場(chǎng)實(shí)戰(zhàn)對(duì)比，讓你徹底搞清楚！
我們先看看一個(gè)簡(jiǎn)單的布局，一個(gè)盒子里面包含三個(gè)盒子，需要兩邊對(duì)齊，中間間距均等分；
首先出場(chǎng)的是“浮動(dòng)布局”：
浮動(dòng)布局曾是Web布局的唯一選擇，雖然現(xiàn)在略顯老態(tài)，但仍有其適用場(chǎng)景，而且簡(jiǎn)單容易上手。
<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布局為的一維布局提供了完美的解決方案，讓我們能夠輕松實(shí)現(xiàn)元素的彈性排列。<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>
我們?cè)倏纯磄rid布局（網(wǎng)格布局）：CSS Grid布局是專門為二維布局設(shè)計(jì)的革命性技術(shù)，可以同時(shí)處理行和列的布局。<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>
- 浮動(dòng)布局相對(duì)好理解，需要間隔多少，直接給出值，但是需要清除浮動(dòng)，否則會(huì)導(dǎo)致布局塌陷，實(shí)現(xiàn)復(fù)雜布局時(shí)代碼冗長(zhǎng)；因?yàn)橹当容^固定所以響應(yīng)式適配需要大量媒體查詢，比較適合簡(jiǎn)單網(wǎng)格布局、文字環(huán)繞圖片等傳統(tǒng)布局需求。
- flex布局代碼比較少，對(duì)于這種橫向布局方式，比較簡(jiǎn)單，如果要實(shí)現(xiàn)元素的垂直居中，左右居中都很方便，元素順序可靈活調(diào)整，強(qiáng)大的空間分配能力。
- Grid布局在這個(gè)例子中和flex布局區(qū)別不太大，沒有明顯的優(yōu)勢(shì)。
當(dāng)然，平時(shí)我們這三種并不是互相排斥的，是可以結(jié)合起來用的，grid可以用來做整體頁(yè)面布局或者是復(fù)雜的網(wǎng)格布局，flex特別適合組件內(nèi)部布局。<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>
現(xiàn)代前端開發(fā)中，推薦以Grid為主力布局工具，F(xiàn)lexbox作為補(bǔ)充，浮動(dòng)布局僅用于特定場(chǎng)景。掌握這三種技術(shù)，并根據(jù)實(shí)際需求靈活選擇，是你成為CSS高手的關(guān)鍵！
閱讀原文：點(diǎn)擊這里?
該文章在 2025/9/22 15:27:57 編輯過
400 186 1886
