武漢互贏網(wǎng)絡(luò)科技股份有限公司
為企業(yè)創(chuàng)品牌·從營銷型網(wǎng)站建設(shè)開始·互贏懂技術(shù)·更懂品牌營銷
24小時(shí)熱線
159 7210 9576027-89992189
為企業(yè)創(chuàng)品牌·從營銷型網(wǎng)站建設(shè)開始·互贏懂技術(shù)·更懂品牌營銷
24小時(shí)熱線
159 7210 9576027-89992189
Flex布局方案很早都提出來了，然后可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。隨著瀏覽器的發(fā)展，目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。.
在網(wǎng)頁設(shè)計(jì)過程中，水平垂直居中是很常用的，但是傳統(tǒng)的方案使用起來分廠費(fèi)勁，下面來看flex如何實(shí)現(xiàn)
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
width: 100%;
height: 100%;
background: #eee;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 300px;
background: yellowgreen;
}
<body>
<div class="box"></div>
</body>
如此看來這樣水平垂直居中是不是很方便的實(shí)現(xiàn)了，
意為"彈性盒模型"，用來為盒狀模型提供最大的靈活性。Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。 當(dāng)父容器設(shè)置了display：flex時(shí)。子元素自動(dòng)成為其成員， 容器默認(rèn)存在兩根軸：水平方向的主軸和垂直的交叉軸，項(xiàng)目默認(rèn)沿主軸排列。
//屬性決定主軸的方向（即項(xiàng)目的排列方向）
flex-direction
//默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行
flex-wrap
//flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
flex-flow
//屬性定義了項(xiàng)目在主軸上的對齊方式。
justify-content
//屬性定義項(xiàng)目在交叉軸上如何對齊。
align-items
//屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
align-content
//定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
order
//定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-grow
//flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
flex-shrink
//定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
flex-basis
//flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選
flex
//允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
align-self
css3中的flex布局是很方便布局的，雖然是個(gè)新東西，但是瀏覽器的發(fā)展，對其的支持也較好，建議在以后的設(shè)計(jì)中多去使用，一方面是潮流，另一方面，也是推動(dòng)技術(shù)發(fā)展
最新動(dòng)態(tài)
生產(chǎn)小工單能給 生產(chǎn)管理帶來哪些好處？
武漢網(wǎng)站制作公司解鎖軟件開發(fā)能做什么？
營銷型網(wǎng)站與普通網(wǎng)站有什么區(qū)別？——武漢網(wǎng)站建設(shè)
常見問題百寶箱
A2014，有位學(xué)妹不顧家人反對，在上海這個(gè)國際化大都市謀了一個(gè)公眾號助理的職位。斗志昂揚(yáng)地奮斗了 3 年，我眼看著她的內(nèi)容駕馭能力突飛猛進(jìn)，內(nèi)容質(zhì)量從三流到一流，職位
A文章主要分析了不同的視覺設(shè)計(jì)元素是如何影響網(wǎng)站用戶體驗(yàn)，希望通過文章的解讀能夠?qū)δ愕漠a(chǎn)品設(shè)計(jì)帶來些啟發(fā)。 也許是因?yàn)槲以谝曈X設(shè)計(jì)上沒有太多經(jīng)驗(yàn)，我發(fā)現(xiàn)
A雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推
027-89992189
掃一掃關(guān)注微信
Copyright 2013-2020 All Rights Reserved 武漢互贏網(wǎng)絡(luò)科技股份有限公司 鄂ICP備19027860號
