成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

彈性盒子display:box

yanwei / 3201人閱讀

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

在做手機(jī)頁(yè)面開(kāi)發(fā)中，一直使用彈性盒子布局，這種布局簡(jiǎn)單快速，且在手機(jī)端已經(jīng)不用擔(dān)心兼容性問(wèn)題，

display:box和display:flex還是有一定差異性，本篇文章只講解box。


父容器上設(shè)置box屬性
在父容器上設(shè)置
display: box;
Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。
display: -webkit-box;
默認(rèn)情況下,子容器會(huì)從左到右水平排列

box-orient: vertical;
設(shè)置該屬性可以使子容器從上到下垂直排列

box-direction: reverse;
子容器在水平方向從右向左(就是說(shuō)最右邊的元素排在最左邊),垂直方向從下向上(最下面的在最上面)

box-align: start | end | center | stretch
父容器水平排列下 start:上,center:中,end:下,stretch:子容器不設(shè)置高度或高度為auto時(shí),子容器會(huì)拉伸的和父容器一樣高,設(shè)置高度同start
父容器垂直排列下 start:左,center:中,end:右,stretch:子容器不設(shè)置寬度或?qū)挾葹閍uto時(shí),子容器會(huì)拉伸的和父容器一樣寬,設(shè)置寬度同start

box-pack: start | end | center | justify
父容器水平排列下 start:左,center:中,end:右,justify:水平等分父容器寬度
父容器垂直排列下 start:上,center:中,end:下,justify:水平等分父容器高度



子容器上設(shè)置box-flex屬性
box-flex: 1;
定義子容器占的比例, 具體計(jì)算規(guī)則,父容器-定寬,剩余的按比例等分。
但實(shí)際計(jì)算中并沒(méi)有實(shí)現(xiàn)等分(子容器中還有元素時(shí)),常用的解決方法是,
添加寬度百分比和box-sizing: border-box;（解決border和padding問(wèn)題）
.bf-2{
    box-sizing: border-box;
    -webkit-box-flex: 2;
    width: 2%;
}
.bf-1{
    box-sizing: border-box;
    -webkit-box-flex: 1;
    width: 1%;
}
這樣可以實(shí)現(xiàn)bf-2是bf-1的2倍
不建議width是一個(gè)數(shù)值和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;
    }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111340.html

相關(guān)文章

  • 彈性盒子模型詳解

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

    rozbo 評(píng)論0 收藏0

  • 彈性布局flex 兼容寫(xiě)法

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

    shiweifu 評(píng)論0 收藏0

  • Flex Box 簡(jiǎn)單彈性布局

    摘要：彈性盒子模型有兩種規(guī)范早起的和后期的。它可以輕易的實(shí)現(xiàn)均分浮動(dòng)居中等靈活布局，在移動(dòng)端只考慮內(nèi)核時(shí)很實(shí)用。一固定寬度占滿(mǎn)剩余寬度垂直方向?qū)R方式水平方向?qū)R方式二固定寬度剩余空間的剩余空間的水平方向?qū)R方式垂直方向?qū)R方式　　彈性盒子模型有兩種規(guī)范：早起的display:box 和后期的display:flex。它可以輕易的實(shí)現(xiàn)均分、浮動(dòng)、居中等靈活布局，在移動(dòng)端只考慮webkit內(nèi)核時(shí)很實(shí)...

    ixlei 評(píng)論0 收藏0

  • CSS_Flex

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

    james 評(píng)論0 收藏0

  • 移動(dòng)端 h5開(kāi)發(fā)相關(guān)內(nèi)容總結(jié)(三)

    摘要：就是說(shuō)，當(dāng)用戶(hù)選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。所以在和移動(dòng)我分別用了兩種方案，傳統(tǒng)布局實(shí)現(xiàn)，彈性盒實(shí)現(xiàn)。前者是控制彈性盒的內(nèi)容垂直方向居中，后者控制內(nèi)容水平方向居中。 之前寫(xiě)過(guò)兩篇開(kāi)發(fā)中遇到的問(wèn)題和解決方案。當(dāng)時(shí)是CSS 和 JavaScript 分開(kāi)寫(xiě)的?，F(xiàn)在寫(xiě)這篇文章的時(shí)候感覺(jué)很多內(nèi)容都是有內(nèi)在聯(lián)系的，所以不好分開(kāi)。...

    cnTomato 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<