国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動(dòng)端優(yōu)先的flex三欄布局

junbaor / 2293人閱讀

摘要：彈性盒或，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列對(duì)齊和分配空白空間。

默認(rèn)情況下先顯示移動(dòng)端，通過(guò) @media 屬性適配屏幕變化

使用flexbox相關(guān)的CSS屬性

display: flex; (父元素)

flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出該如何顯示)

flex: flex-grow flex-shrink flex-basis; (子元素, 子元素該如何分配空間)

order: number; (子元素, 子元素的順序該如何排列)

重點(diǎn)

在父元素上設(shè)置 display: flex 和 flex-wrap: wrap

通過(guò) flex 來(lái)調(diào)整子元素上的空間分配(擴(kuò)展、收縮比例和伸縮基準(zhǔn)值)

通過(guò) order 來(lái)調(diào)整子元素的顯示順序(把 .center 放在中間)

例子 CSS 
    .box {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .center {
        background-color: #f00;
        flex: 100% 1;
    }
    .left, .right {
        flex: 100% 1;
    }
    .left {
        background-color: #0f0;
    }
    .right {
        background-color: #00f;
    }
    @media all and (min-width: 400px) {
        .left, .right {
            flex: 50% 1;
        }
    }
    @media all and (min-width: 800px) {
        .box {
            flex-wrap: nowrap;
        }
        .center {
            order: 2;
            flex: 1;
        }
        .left, .right {
            flex: 0 0 300px;
        }
        .left {
            order: 1;
        }
        .right {
            order: 3;
        }
    }
HTML 

    

        彈性盒子是 CSS3 的一種新的布局模式。

        CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?        引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
    

    
left

    
right

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114106.html

相關(guān)文章

  • 移動(dòng)端優(yōu)先的flex三欄布局的使用方法

    摘要：目前移動(dòng)端的布局也都是用。彈性盒或，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列對(duì)齊和分配空白空間。 felxbox布局是css3里新出的一個(gè)，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個(gè)。目前移動(dòng)端的布局也都是用flexbox。 這篇文章主要介紹了移動(dòng)端優(yōu)先...

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

  • 移動(dòng)端優(yōu)先的flex三欄布局的使用方法

    摘要：目前移動(dòng)端的布局也都是用。彈性盒或，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列對(duì)齊和分配空白空間。 felxbox布局是css3里新出的一個(gè)，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個(gè)。目前移動(dòng)端的布局也都是用flexbox。 這篇文章主要介紹了移動(dòng)端優(yōu)先...

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

  • 圣杯布局和雙飛翼布局

    摘要：參考文章同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局實(shí)現(xiàn)的效果主要在中，和固定寬度，首先渲染，且自適應(yīng)寬度。 ps: 參考文章 DotHide同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別 經(jīng)典布局 圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

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

  • CSS布局說(shuō)——可能是最全的

    摘要：元素框相對(duì)于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。這些相對(duì)于布局來(lái)說(shuō)是基礎(chǔ)的，同時(shí)也是非常重要的?？梢钥吹?，浮動(dòng)元素，其實(shí)對(duì)于布局來(lái)說(shuō)，是特別危險(xiǎn)的。 前言 現(xiàn)在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁(yè)面仔?；蛟S是職責(zé)越來(lái)越大，整體的前端井噴式的發(fā)展，使我們只關(guān)注了js，而疏遠(yuǎn)了css和html。 其實(shí)，我們可能經(jīng)常在聊組件化，咋地咋地。但是，回過(guò)頭來(lái)思...

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

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

0條評(píng)論

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