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

資訊專欄INFORMATION COLUMN

flex 實例 豆瓣手機端布局實現(xiàn)

wua_wua2012 / 2167人閱讀

摘要：最終成品頭部布局實現(xiàn)豆瓣搜索打開設(shè)置為彈性容器，可采用兩端對齊或把設(shè)置為主軸起點邊緣對齊把設(shè)置為主軸終點邊緣對齊左右兩邊可能存在多項，那么在把它們兩塊設(shè)置為彈性容器考慮到彈性項目大小可能不一樣，可設(shè)置為垂直居中。

0、最終成品

1、頭部布局實現(xiàn)

    <div class="module-header">
        <div class="m-left" style="background:red">
            <div class="1">豆瓣div>
            <div class="2">搜索div>
        div>
        <div class="m-right" style="background:royalblue">
            <div class="1">打開APPdiv>
        div>
    div>

1：設(shè)置module-header為彈性容器，可采用兩端對齊或把m-left設(shè)置為主軸起點邊緣對齊、把m-right設(shè)置為主軸終點邊緣對齊

2：左、右兩邊可能存在多項，那么在把它們兩塊設(shè)置為彈性容器

3：考慮到彈性項目大小可能不一樣，可設(shè)置為垂直居中。

?

.module-header {
    display: flex;
    flex-direction: row;
    align-content: center;
    padding: .5rem;
}
.module-header .m-left {
    display: flex;
    flex: 1;
    justify-content: flex-start;
}
.module-header .m-right {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

?

2、多行雙排并列

?主軸 設(shè)置為多行，水平方向兩端對齊

<div class="module-column-two quick-nav">
        <div class="m-item"><a href="#">影院熱映a>div>
        <div class="m-item"><a href="#">歐美新碟榜a>div>
        <div class="m-item"><a href="#">豆瓣時間a>div>
        <div class="m-item"><a href="#">使用豆瓣Appa>div>
div>
.module-column-two {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fff;
    padding: .5rem;
    justify-content: space-between;
}

.module-column-two .m-item {
    margin: .5rem 0;
    flex:0 0 calc(100% / 2 - .5rem);
}

?

3、單排 1 vs 多

?

<div class="module-1v2">
    <div class="m-item-1"><img src="../i.png">div>
    <div class="m-item-child">
        <div class="module-flex-1"><img src="../i.png"div>
        <div class="module-flex-1"><img src="../i.png"div>
    div>
div>
.module-1v2 {
    display: flex;
    flex-direction: row;
}

.module-1v2 .m-item-1 {
    flex: 2;
}

.module-1v2 .m-item-child {
    display: flex;
    flex: 1;
    flex-direction: column;
}

?

4、圖文排序

<div class="module-txt">
    <div class="m-item-t">
        <div class="flex-1" style="background: gold">標題div>
        <div class="flex-1" style="background: rebeccapurple">內(nèi)容div>
        <div class="flex-1" style="background: gold">時間div>
    div>
    <div class="m-item-p">
        <img src="../i.png">
    div>
div>
.module-txt {
    display: flex;
    flex-direction: row;
}

.module-txt .m-item-t {
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.module-txt .m-item-p {
    flex: 1;
}

?

樣本：http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2-Flexbox/flex%E7%BB%83%E4%B9%A0-%E8%B1%86%E7%93%A3%E9%A6%96%E9%A1%B5/

源碼下載：鏈接：https://pan.baidu.com/s/1Y6cu5R9BgVf5omAEgyZLVw
提取碼：44nt
復制這段內(nèi)容后打開百度網(wǎng)盤手機App，操作更方便哦


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

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

相關(guān)文章

  • 微信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里，也歡迎各位 UI組件開發(fā)框架實用庫開發(fā)工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎(chǔ)樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

    Olivia 評論0 收藏0

  • Vue2.0開發(fā)仿豆瓣電影WebApp

    摘要：從之前黃軼老師的高仿外賣開始接觸過這個滾動庫，感覺體驗感很好，用起來也比較順手，所以在后來的項目聯(lián)系中就一直在使用。 前言 雖然在此之前已經(jīng)有類似的仿豆瓣電影的webapp,但或是開發(fā)的有些簡潔功能不太完善，或是體驗感覺得可以再完善下，所以自己摸索著對比豆瓣和豆瓣電影兩款app做了一下，初步滿足了自己的想法，經(jīng)過幾次完善基本不會出現(xiàn)bug，如果發(fā)現(xiàn)存在問題請告訴我修改，謝謝！ 2017...

    gplane 評論0 收藏0

  • flex-手機端主頁布局實例---構(gòu)造頁面結(jié)構(gòu)

    摘要：頁面布局實例，成本效果圖如下，源碼下載在最下面。源碼下載提取碼樣本地址Flexbox頁面布局實例，成本效果圖如下， 源碼下載在最下面。 源碼下載：https://pan.baidu.com/s/18o5hVuWtflUpgvMk3LzQ5w? 提取碼：wiyc樣本地址：http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E...

    hot_pot_Leo 評論0 收藏0

  • Vue全家桶實現(xiàn)還原豆瓣電影wap版

    摘要：豆瓣電影版用全家桶仿寫豆瓣電影版。原計劃仿寫完所有頁面，礙于豆瓣的接口有限，實現(xiàn)頁面也有限。由于公開的豆瓣接口具有訪問次數(shù)限制，克隆到本地體驗效果更加端訪問已設(shè)置寬度適配。 douban-movie(豆瓣電影wap版) 用vue全家桶仿寫豆瓣電影wap版。 最近在公司項目中嘗試使用vue，但奈何自己初學水平有限，上了vue沒有上vuex，開發(fā)過程特別難受。 于是玩一玩本項目，算是對相關(guān)...

    Near_Li 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

    xiaokai 評論0 收藏0

發(fā)表評論

0條評論

wua_wua2012

男|高級講師

TA的文章

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