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

資訊專欄INFORMATION COLUMN

移動端優先的flex三欄布局

junbaor / 2284人閱讀

摘要：彈性盒或，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列對齊和分配空白空間。

默認情況下先顯示移動端，通過 @media 屬性適配屏幕變化

使用flexbox相關的CSS屬性

display: flex; (父元素)

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

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

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

重點

在父元素上設置 display: flex 和 flex-wrap: wrap

通過 flex 來調整子元素上的空間分配(擴展、收縮比例和伸縮基準值)

通過 order 來調整子元素的顯示順序(把 .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），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
        引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
    

    
left

    
right

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

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

相關文章

  • 移動端優先的flex三欄布局的使用方法

    摘要：目前移動端的布局也都是用。彈性盒或，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列對齊和分配空白空間。 felxbox布局是css3里新出的一個，它就是為了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的布局也都是用flexbox。 這篇文章主要介紹了移動端優先...

    leon 評論0 收藏0

  • 移動端優先的flex三欄布局的使用方法

    摘要：目前移動端的布局也都是用。彈性盒或，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列對齊和分配空白空間。 felxbox布局是css3里新出的一個，它就是為了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的布局也都是用flexbox。 這篇文章主要介紹了移動端優先...

    y1chuan 評論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    ZweiZhao 評論0 收藏0

  • CSS布局說——可能是最全的

    摘要：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。這些相對于布局來說是基礎的，同時也是非常重要的?？梢钥吹剑釉兀鋵崒τ诓季謥碚f，是特別危險的。 前言 現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔?；蛟S是職責越來越大，整體的前端井噴式的發展，使我們只關注了js，而疏遠了css和html。 其實，我們可能經常在聊組件化，咋地咋地。但是，回過頭來思...

    hearaway 評論0 收藏0

發表評論

0條評論

junbaor

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<