flex 實例 豆瓣手機端佈局實現

0、最終成品

一、頭部佈局實現

    <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">打開APP</div>
        </div>
    </div>

1：設置module-header爲彈性容器，可採用兩端對齊或把m-left設置爲主軸起點邊緣對齊、把m-right設置爲主軸終點邊緣對齊

2：左、右兩邊可能存在多項，那麼在把它們兩塊設置爲彈性容器

3：考慮到彈性項目大小可能不同，可設置爲垂直居中。

 

.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;
}

 

二、多行雙排並列

 主軸 設置爲多行，水平方向兩端對齊

<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="#">使用豆瓣App</a></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);
}

 

三、單排 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;
}

 

四、圖文排序

<div class="module-txt">
    <div class="m-item-t">
        <div class="flex-1" style="background: gold">標題</div>
        <div class="flex-1" style="background: rebeccapurple">內容</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
複製這段內容後打開百度網盤手機App，操做更方便哦