摘要:在做手機頁面開發中,一直使用彈性盒子布局,這種布局簡單快速,且在手機端已經不用擔心兼容性問題,和還是有一定差異性,本篇文章只講解。父容器上設置屬性在父容器上設置內核的瀏覽器,必須加上前綴。
在做手機頁面開發中,一直使用彈性盒子布局,這種布局簡單快速,且在手機端已經不用擔心兼容性問題,
</>復制代碼
display:box和display:flex還是有一定差異性,本篇文章只講解box。
</>復制代碼
父容器上設置box屬性
</>復制代碼
在父容器上設置
display: box;
Webkit內核的瀏覽器,必須加上-webkit前綴。
display: -webkit-box;
默認情況下,子容器會從左到右水平排列
box-orient: vertical;
設置該屬性可以使子容器從上到下垂直排列
box-direction: reverse;
子容器在水平方向從右向左(就是說最右邊的元素排在最左邊),垂直方向從下向上(最下面的在最上面)
box-align: start | end | center | stretch
父容器水平排列下 start:上,center:中,end:下,stretch:子容器不設置高度或高度為auto時,子容器會拉伸的和父容器一樣高,設置高度同start
父容器垂直排列下 start:左,center:中,end:右,stretch:子容器不設置寬度或寬度為auto時,子容器會拉伸的和父容器一樣寬,設置寬度同start
box-pack: start | end | center | justify
父容器水平排列下 start:左,center:中,end:右,justify:水平等分父容器寬度
父容器垂直排列下 start:上,center:中,end:下,justify:水平等分父容器高度
</>復制代碼
子容器上設置box-flex屬性
</>復制代碼
box-flex: 1;
定義子容器占的比例, 具體計算規則,父容器-定寬,剩余的按比例等分。
但實際計算中并沒有實現等分(子容器中還有元素時),常用的解決方法是,
添加寬度百分比和box-sizing: border-box;(解決border和padding問題)
.bf-2{
box-sizing: border-box;
-webkit-box-flex: 2;
width: 2%;
}
.bf-1{
box-sizing: border-box;
-webkit-box-flex: 1;
width: 1%;
}
這樣可以實現bf-2是bf-1的2倍
不建議width是一個數值和box-flex一起使用
</>復制代碼
具體例子
html
</>復制代碼
1
2
3
css
</>復制代碼
.box {
margin: 50px auto;
width: 300px;
height: 200px;
border: 1px solid #dd5555;
/* 伸縮盒子 */
display: box;
display: -webkit-box;
/* 垂直排列 */
/*box-orient: vertical;*/
/*-webkit-box-orient: vertical;*/
/* 相反方向 */
/*!*box-direction: reverse;*/
/*-webkit-box-direction: reverse;*/
/*-webkit-box-align: stretch;*/
/*-webkit-box-pack: center*/
}
.item1 {
background-color: #ffffd;
-webkit-box-flex: 1;
box-sizing: border-box;
width: 1%;
}
.item2 {
background-color: #44DDDD;
height: 40px;
width: 120px;
}
.item3 {
background-color: #0482ca;
height: 50px;
-webkit-box-flex: 2;
width: 2%;
box-sizing: border-box;
border: 1px solid #ffffd;
}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111340.html
摘要:設置在彈性項目上的屬性屬性定義項目的排列順序。屬性定義了項目的縮小比例,默認為,即如果空間不足,該項目將縮小。屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋屬性。 兼容瀏覽器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 瀏覽器對最新flexbox規范的支持情況: Chrome 29+ Firefox 28+...
摘要:彈性盒子模型有兩種規范早起的和后期的。它可以輕易的實現均分浮動居中等靈活布局,在移動端只考慮內核時很實用。一固定寬度占滿剩余寬度垂直方向對齊方式水平方向對齊方式二固定寬度剩余空間的剩余空間的水平方向對齊方式垂直方向對齊方式 彈性盒子模型有兩種規范:早起的display:box 和后期的display:flex。它可以輕易的實現均分、浮動、居中等靈活布局,在移動端只考慮webkit內核時很實...
摘要:就是說,當用戶選擇該標簽時,瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。標簽的屬性應當與相關元素的屬性相同。所以在和移動我分別用了兩種方案,傳統布局實現,彈性盒實現。前者是控制彈性盒的內容垂直方向居中,后者控制內容水平方向居中。 之前寫過兩篇開發中遇到的問題和解決方案。當時是CSS 和 JavaScript 分開寫的。現在寫這篇文章的時候感覺很多內容都是有內在聯系的,所以不好分開。...
閱讀 2394·2021-09-22 16:01
閱讀 3160·2021-09-22 15:41
閱讀 1175·2021-08-30 09:48
閱讀 494·2019-08-30 15:52
閱讀 3331·2019-08-30 13:57
閱讀 1717·2019-08-30 13:55
閱讀 3661·2019-08-30 11:25
閱讀 766·2019-08-29 17:25