最近使用 flex 布局來(lái)做各種居中真的帶來(lái)了不少方便，現(xiàn)在來(lái)總結(jié)一下平時(shí)的普通布局是怎樣使用 flex 布局來(lái)實(shí)現(xiàn)一樣的效果。

一、左右 1:1 布局

布局：

<div class="container"><div class="child">LEFT</div><div class="child">RIGHT</div> </div> 復(fù)制代碼

利用 float 屬性

在使用 flex 之前，實(shí)現(xiàn)這種布局主要是利用 float 屬性，使元素脫離文檔流，同時(shí)因?yàn)橐獙?shí)現(xiàn) 1:1 的比例，要將子元素的 width 設(shè)為 50%。同時(shí)要記得在后面的元素添加 clear:both 屬性。

.container {margin: 40px;height: 600px; }.child {width: 50%;height: 100%;float: left;box-sizing: border-box;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.7); } 復(fù)制代碼

利用 flex-basis

如果使用 flex 布局，要將容器（父元素）display 設(shè)為 flex，項(xiàng)目（子元素）設(shè)定 flex-basis 值為 50%就可以實(shí)現(xiàn) 1:1 布局了，這個(gè)屬性和 width 作用差不多，主要是指定 flex 元素在主軸方向上的初始大小。

.container {margin: 40px;height: 600px;display: flex;flex-direction: row; }.child {height: 100%;flex-basis: 50%;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.7); } 復(fù)制代碼

利用 flex: 1

當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字，則該數(shù)字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%。于是就可以在子元素上使用 flex: 1 來(lái)實(shí)現(xiàn)平均布局，并且對(duì)于不同數(shù)量的子元素都適用。謝謝 @pingan8787

.container {margin: 40px;height: 600px;display: flex;flex-direction: row; }.child {height: 100%;flex: 1;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.7); } 復(fù)制代碼

二、左中右 1:1:1 布局

實(shí)現(xiàn)方法其實(shí)和上面差不多，都是使用 float 和 flex-basis 屬性來(lái)指定比例為 33.3%來(lái)實(shí)現(xiàn)。

布局：

<div class="container"><div class="child">LEFT</div><div class="child">MIDDLE</div><div class="child">RIGHT</div> </div> 復(fù)制代碼

利用 float 屬性

.container {margin: 40px;height: 600px; }.child {width: 33.3%;height: 100%;float: left;box-sizing: border-box;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.7); } 復(fù)制代碼

利用 flex: basis

.container {margin: 40px;height: 600px;display: flex;flex-direction: row; }.child {height: 100%;flex-basis: 33.3%;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.7); } 復(fù)制代碼

利用 flex: 1

和上面的左右布局代碼一樣，比 flex-basis: 33.3% 好，推薦使用。

三、水平居中布局

布局：

<div class="container"><div class="child">CHILD</div> </div> 復(fù)制代碼

利用 margin

相信大部分人都知道對(duì)于塊級(jí)子元素利用簡(jiǎn)單的margin: 0 auto就能實(shí)現(xiàn)了吧，這就不多介紹了。

.container {margin: 40px;height: 600px; }.child {height: 100%;width: 50%;margin: 0 auto;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.7); } 復(fù)制代碼

利用 flex 布局

主要起作用的屬性是 justify-content，它定義了項(xiàng)目在主軸上的對(duì)齊方式，所以只需把它設(shè)為 center 就能實(shí)現(xiàn)了，前提是父元素的 flex-direction 屬性為 row，不過(guò)默認(rèn)就是 row。

.container {margin: 40px;height: 600px;display: flex;justify-content: center; }.child {height: 100%;width: 50%;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;text-align: center;font-size: 40px;color: rgba(255, 255, 255, 0.7); } 復(fù)制代碼

四、垂直居中布局

對(duì)于一般來(lái)說(shuō)，都是利用上下padding來(lái)實(shí)現(xiàn)垂直居中，很少會(huì)有父元素height值為固定值這種需求。這里為了體現(xiàn)flex的特性，特地對(duì)比在父元素height值固定的情況下如何實(shí)現(xiàn)垂直居中。

布局：

<div class="container"><div class="child">CHILD</div> </div> 復(fù)制代碼

利用 line-height

對(duì)于垂直居中就沒(méi)有水平居中這么好寫(xiě)了，我平時(shí)主要是設(shè)置 line-height 配合 inline-block 這種方法來(lái)實(shí)現(xiàn)的。

將父元素 line-height 設(shè)為其 height 的值，并且將子元素的 display 屬性設(shè)為 inline-block，再利用 vertical-align 將自己定位在父元素垂直軸上中心就可實(shí)現(xiàn)了。但是要記得將子元素的 line-height 初始化（initial），因?yàn)?line-height 默認(rèn)是繼承父元素的值的。

.container {margin: 40px;height: 600px;border: rgb(65, 184, 131) 8px solid;line-height: 600px;text-align: center; }.child {display: inline-block;height: 50%;width: 80%;vertical-align: middle;line-height: initial;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;color: rgba(255, 255, 255, 0.7);font-size: 40px; } 復(fù)制代碼

利用 flex 布局

如果使用 flex 就很簡(jiǎn)單了，要控制父元素的 align-items 屬性即可，它主要定義項(xiàng)目（子元素）在交叉軸上如何對(duì)齊。

.container {margin: 40px;height: 600px;border: rgb(65, 184, 131) 8px solid;display: flex;justify-content: center;align-items: center; }.child {height: 50%;width: 80%;background-color: rgb(53, 73, 94);border: rgb(65, 184, 131) 8px solid;color: rgba(255, 255, 255, 0.7);font-size: 40px;text-align: center; } 復(fù)制代碼

利用 table

小結(jié)

flex布局對(duì)于做各種居中帶來(lái)了不小方便，同時(shí)如今現(xiàn)代瀏覽器對(duì)其兼容性也不錯(cuò)了。最后推薦兩篇干貨文章。

• 阮一峰：Flex 布局教程（語(yǔ)法篇）
• 顏海鏡：CSS實(shí)現(xiàn)水平垂直居中的1010種方式

總結(jié)

以上是生活随笔為你收集整理的使用 Flex 布局与其他普通布局的简单对比的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。