彈性盒子display:box

yanwei 發布于2019-08-29 10:58 / 3197人閱讀

摘要：在做手機頁面開發中，一直使用彈性盒子布局，這種布局簡單快速，且在手機端已經不用擔心兼容性問題，和還是有一定差異性，本篇文章只講解。父容器上設置屬性在父容器上設置內核的瀏覽器，必須加上前綴。

在做手機頁面開發中，一直使用彈性盒子布局，這種布局簡單快速，且在手機端已經不用擔心兼容性問題，

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;
    }

GPU云服務器云服務器比價盒子盒子比價電視盒子阿里盒子

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111340.html

彈性盒子模型詳解

摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標準文檔彈性盒模型在過去幾年間制定了三版草案規范。給子元素直接添加屬性即可七后話以上是本文所有內容，以下是小白我的感慨。一、前言由于W3C在制定彈性盒模型內容有多版草案，在網上瀏覽了很多視頻和文章，版本有新有舊，所以準備寫一篇關于彈性盒模型的文章，一是輔助自己學習，二是幫忙其他前端學習者更容易地彈性盒模型。二、彈性盒...

rozbo 2019-08-28 18:27 評論0 收藏0
彈性布局flex 兼容寫法

摘要：設置在彈性項目上的屬性屬性定義項目的排列順序。屬性定義了項目的縮小比例，默認為，即如果空間不足，該項目將縮小。屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。兼容瀏覽器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 瀏覽器對最新flexbox規范的支持情況： Chrome 29+ Firefox 28+...

shiweifu 2019-08-30 11:21 評論0 收藏0
Flex Box 簡單彈性布局

摘要：彈性盒子模型有兩種規范早起的和后期的。它可以輕易的實現均分浮動居中等靈活布局，在移動端只考慮內核時很實用。一固定寬度占滿剩余寬度垂直方向對齊方式水平方向對齊方式二固定寬度剩余空間的剩余空間的水平方向對齊方式垂直方向對齊方式　　彈性盒子模型有兩種規范：早起的display:box 和后期的display:flex。它可以輕易的實現均分、浮動、居中等靈活布局，在移動端只考慮webkit內核時很實...

ixlei 2019-04-23 13:33 評論0 收藏0
CSS_Flex

摘要：的屬性采用布局的元素，稱為容器，簡稱容器它的所有子元素自動成為容器成員，稱之為項目簡稱項目容器默認存在兩根軸水平主軸和垂直的交叉軸。子項在容器的當前行側軸縱軸方向上的對齊方式對影響與交叉點的起點對齊。負值對該屬性無效。 CSS3 彈性盒子(Flexible Box 或 Flexbox)，彈性框布局，它具有定義一個可伸縮項目的能力。flex元素可以根據flex-grow因子拉伸以填充可用...

james 2019-08-30 13:19 評論0 收藏0
移動端 h5開發相關內容總結(三)

摘要：就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。標簽的屬性應當與相關元素的屬性相同。所以在和移動我分別用了兩種方案，傳統布局實現，彈性盒實現。前者是控制彈性盒的內容垂直方向居中，后者控制內容水平方向居中。之前寫過兩篇開發中遇到的問題和解決方案。當時是CSS 和 JavaScript 分開寫的。現在寫這篇文章的時候感覺很多內容都是有內在聯系的，所以不好分開。...

cnTomato 2019-08-19 17:33 評論0 收藏0