萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> Html5 >> 關於display: box 和 box-flex

關於display: box 和 box-flex

這兩天做手機項目,使用到這個css3新屬性。現在還不為所有浏覽器支持,所以使用的時候要加上前綴。使用方法見下面:

html代碼:

<div class="s-indLine">
            <div class="s-indNav s-indIntro">
                <span class="s-icon"></span>
                <p>品牌介紹</p>
            </div>
            <div class="s-indNav s-indInfo">
                <span class="s-icon"></span>
                <p>優惠信息</p>
            </div>
        </div>
        <div class="s-indLine">
            <div class="s-indNav s-indShop">
                <span class="s-icon"></span>
                <p>門店查找</p>
            </div>
            <div class="s-indNav s-indGoods">
                <span class="s-icon"></span>
                <p>熱賣商品</p>
            </div>
        </div>

css代碼:

.s-indLine{    
    display: -webkit-box;
    display: -moz-box;
    display: box;
    margin-bottom: 10px;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
}
.s-indLine .s-indNav{
    -webkit-box-flex: 5;
    -moz-box-flex: 5;
    box-flex: 5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 10px;
    color: #ffffff;
    text-align: center;
    height: 105px;
    padding: 15px 0px;
    font-size: 1.5rem;
}
.s-indLine .s-indNav:first-child{
    margin-right: 10px;
}
.s-indIntro{
    background: #4eb566;
}
.s-indInfo{
    background: #ffa422;
}
.s-indShop{
    background: #7788f2;
}
.s-indGoods{
    background: #ef604d;
}
.s-indLine .s-indNav .s-icon, .s-groupNav .s-icon{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.s-indIntro .s-icon{
    background-image: url("group.png");
}
.s-indInfo .s-icon{
    background-image: url("group.png");
}
.s-indShop .s-icon{
    background-image: url("group.png");
}
.s-indGoods .s-icon{
    background-image: url("group.png");
}

可以不給子元素設置box-flex值,直接使用width代替,也可以設置margin 和 padding 值。得到的效果圖如下:

關於display: box 和 box-flex  三聯

在chrome或者手機其他的以-webkit為內核的浏覽器上調試時,上面的代碼是沒有問題的,但是在火狐下面,會出現問題,如下圖所示:

這地方解決辦法,必須給父元素添加width樣式,例如 width: 100%; 即可。

 

此外在火狐上還有一個問題,上面說到可以給子元素不設置box-flex,而是設置width,但是在火狐上不能識別width,而是必須設置box-flex。

copyright © 萬盛學電腦網 all rights reserved