css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用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)題。
- 上一篇: 做自媒体内容采集有什么套路吗?怎么写出优
- 下一篇: 2021-03-30 一笔记 STM