由于在日常工作中使用css或者bootstrap的柵格系統(tǒng)已經(jīng)能很好的滿足業(yè)務(wù)需求，所以一直以來(lái)對(duì)css3的彈性布局不是很感冒。

近日有幸在一篇文章中領(lǐng)略了flex的魅力--簡(jiǎn)潔優(yōu)雅。隨試之。

/*容器*/

.flex{

display: flex;

display: -webkit-flex;/*Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。*/

/*注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。*/

flex-direction: row;/*決定主軸的方向，即子項(xiàng)目(子元素)橫向排列還是縱向排列*/

/*row(默認(rèn)值)：主軸為水平方向，起點(diǎn)在左端。

row-reverse：主軸為水平方向，起點(diǎn)在右端。

column：主軸為垂直方向，起點(diǎn)在上沿。

column-reverse：主軸為垂直方向，起點(diǎn)在下沿。*/

flex-wrap:nowrap;/*定義如果一條軸線排不下，如何換行*/

/*nowrap(默認(rèn))：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。*/

justify-content: flex-start;/*定義了項(xiàng)目在主軸上的對(duì)齊方式。*/

/*flex-start(默認(rèn)值)：左對(duì)齊

flex-end：右對(duì)齊

center： 居中

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。*/

align-items: flex-start;/*定義項(xiàng)目在交叉軸上如何對(duì)齊。*/

/*flex-start：交叉軸的起點(diǎn)對(duì)齊。

flex-end：交叉軸的終點(diǎn)對(duì)齊。

center：交叉軸的中點(diǎn)對(duì)齊。

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。

stretch(默認(rèn)值)：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。*/

}

/*項(xiàng)目，容器里的子元素默認(rèn)成為項(xiàng)目，并擁有項(xiàng)目的默認(rèn)屬性*/

.flex-item{

order:;/*定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。*/

flex-grow:;/*定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。*/

/*如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間(如果有的話)。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。*/

flex-shrink:;/*定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。*/

flex-basis:auto;/*定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間(main size)。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。*/

flex:0 1 auto;/*flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。*/

align-self:auto;/*允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性*/

}

以上就是flex相關(guān)的所有屬性。詳情可以參考?阮一峰大神的博文，很詳細(xì)哦！

現(xiàn)在開始實(shí)戰(zhàn)，寫兩個(gè)常用的布局。

1、圖文列表。

這是效果圖，下面開始上代碼。

帥舅舅

JavaScript全棧工程師成長(zhǎng)中……

.container1{

display: flex;

display: -webkit-flex;

flex-direction: row;

height: 50px;

}

.left{

flex: 0 1 50px;

background-color: lightblue;

}

.right{

display: flex;

display: -webkit-flex;

flex-direction: column;

flex: 1 1 auto;

}

.title{

flex: 0 1 20px;

background-color: lightcyan;

}

.desc{

flex: 1 1 auto;

background-color: lightgray;

font-size: 12px;

color: #666;

}

.vertical-center{/*彈性布局實(shí)現(xiàn)垂直居中*/

display: flex;

display: -webkit-flex;

flex-direction:column;

justify-content:center;

}

這里有個(gè)技巧就是可以定義的排列順序.left{order:1}，達(dá)到左側(cè)圖片居右的效果

2、宮格布局

12345

.container2{

display: flex;

display: -webkit-flex;

flex-direction: row;/*決定主軸的方向*/

flex-wrap:wrap;

}

.item{

height: 100px;

flex: 0 1 50%;

background-color: lightcoral;

color: white;

font-size: 20px;

text-align: center;

line-height: 100px;

border: 1px solid white;

box-sizing: border-box;

}

現(xiàn)在只是簡(jiǎn)單的寫了個(gè)demo,認(rèn)識(shí)和理解都還不深刻。隨著今后在工作中的頻繁使用，相信會(huì)有更多的發(fā)現(xiàn)和驚喜。

徹底搞懂flex彈性盒模型布局

為什么要用flex 基于css3簡(jiǎn)單方便,更優(yōu)雅的實(shí)現(xiàn),瀏覽器兼容性好,傳統(tǒng)的css實(shí)現(xiàn)一個(gè)div居中布局要寫一堆代碼,而現(xiàn)在幾行代碼就搞定了,沒有理由不用flex. 兼容性: Base Browse ...

Flex 彈性盒模型

box flex 彈性盒模型(轉(zhuǎn)載)

css3引入了新的盒模型——彈性盒模型,該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間.這與XUL(火狐使用的用戶交互語(yǔ)言)相似,其它語(yǔ)言也使用相同的盒模型,如XAML .GladeX ...

css3教程：彈性盒模型

Css3引入了新的盒模型——彈性盒模型,該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間.這與XUL(火狐使用的用戶交互語(yǔ)言)相似,其它語(yǔ)言也使用相同的盒模型,如XAML .GladeX ...

columns分欄與flex彈性盒模型

columns ?分欄 值:column-width:設(shè)置每列的寬度 ? ? ? ?column-count:設(shè)置列數(shù) ? 例:columns{200px 3} ? 列數(shù)和寬度固定 ? ? ? ?co ...

IT兄弟連 HTML5教程 CSS3屬性特效 彈性盒模型

CSS3引入了新的盒模型——彈性盒模型,該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間.使用該模型,可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動(dòng)布局或自適應(yīng)字體大小的彈性布局.彈性盒模型看起 ...

flex彈性盒模型

flex 意思是彈性布局,用來(lái)給盒模型提供最大的靈活度,指定容器中的項(xiàng)目為彈性布局,類似于float:left; 比f(wàn)loat的好處是容器沒有設(shè)置高度,會(huì)根據(jù)項(xiàng)目來(lái)自適應(yīng)高度,我們都知道,設(shè)置floa ...

隨機(jī)推薦

自制文件上傳JS控件，支持IE、chrome、firefox etc.

(function() { if (window.FileUpload) { return; } window.FileUpload = function (id, url) { this.id = ...

UIView的setNeedsDisplay和setNeedsLayout

1,UIView的setNeedsDisplay和setNeedsLayout方法 首先兩個(gè)方法都是異步執(zhí)行的.而setNeedsDisplay會(huì)調(diào)用自動(dòng)調(diào)用drawRect方法,這樣可以拿到 ?UI ...

MFC對(duì)話框顯示BMP圖片

1.MFC對(duì)話框顯示BMP圖片我們先從簡(jiǎn)單的開始吧.先分一個(gè)類: (一) 非動(dòng)態(tài)顯示圖片(即圖片先通過(guò)資源管理器載入,有一個(gè)固定ID) (二) 動(dòng)態(tài)載入圖片(即只需要在程序中指定圖片的路徑即可載入) ...

delphi.位操作

位操作網(wǎng)上有很多介紹,請(qǐng)上網(wǎng)google/baidu,比如: 位操作技巧實(shí)例大全: http://blog.csdn.net/g_spider/article/details/5750665 位操作基 ...

SVN刪除同名文件夾

解???? 釋一下:???? SVN? 出現(xiàn)這個(gè)錯(cuò)誤的原因是我刪除了一個(gè)文件夾后又創(chuàng)建了一個(gè)同名文件夾.? 在? svn?? server? 端,好像是不能區(qū)分這兩個(gè)文件夾,所以出現(xiàn)了錯(cuò)誤.???? ...

ESXi控制臺(tái)TSM：彌補(bǔ)vSphere Client不足

當(dāng)vSphere Client不能完成某些任務(wù)時(shí),主機(jī)的ESXi控制臺(tái)及其技術(shù)支持模式(TSM)可能能派上用場(chǎng). ESXi控制臺(tái)允許管理員執(zhí)行不能通過(guò)vSphere Client進(jìn)行配置的管理任務(wù),比 ...

QT VS2008未處理的異常: 0xC0000005

癥狀如圖所示 出錯(cuò)代碼段在第3行 QString dir = QFileDialog::getExistingDirectory(this, ???tr("Save file path&qu ...

如何避免提交頁(yè)面，信息未填寫完善 就出現(xiàn)注冊(cè)成功提示 基于js

基于bootstrip做好一個(gè)頁(yè)面后,出現(xiàn)如下效果圖 這個(gè)頁(yè)面是未經(jīng)過(guò)任何后端處理的頁(yè)面,如果直接填寫一個(gè)用戶名 或者不填寫任何東西都可以注冊(cè)成功的,先來(lái)演示只輸入一個(gè)用戶名 就要可以注冊(cè)成功的. 點(diǎn) ...

DataSnap服務(wù)器從xe2升級(jí)到xe5報(bào)錯(cuò)的處理

DataSnap服務(wù)器從xe2升級(jí)到xe5環(huán)境下,能夠正常編譯,但運(yùn)行后會(huì)報(bào)錯(cuò),如下圖: 處理參考: http://blogs.embarcadero.com/pawelglowacki/2013/0 ...

SQL Server T—SQL 存儲(chǔ)過(guò)程 觸發(fā)器

一.存儲(chǔ)過(guò)程 存儲(chǔ)過(guò)程是一組編譯在單個(gè)執(zhí)行計(jì)劃中的T-SQL語(yǔ)句 存儲(chǔ)過(guò)程:就像函數(shù)一樣的會(huì)保存在數(shù)據(jù)庫(kù)中(可編程性) 存儲(chǔ)過(guò)程的優(yōu)點(diǎn): 1.允許模塊化程序設(shè)計(jì) 2.允許更快執(zhí)行如果某操作需要大量T- ...

總結(jié)

以上是生活随笔為你收集整理的css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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