flex 实例豆瓣手机端布局实现-优快云博客

本文详细介绍了Flex布局在网页设计中的应用，包括头部布局实现、多行双排并列、单排1vs多布局以及图文排序等技巧，通过实例展示了如何利用Flex布局解决常见的网页布局难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0、最终成品

1、头部布局实现

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

2、多行双排并列

主轴设置为多行，水平方向两端对齐

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

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">内容</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;
}