flex弹性盒子实现左中右居中布局

fengchengwu2012

已于 2024-03-13 18:10:08 修改

阅读量392

点赞数 6

分类专栏： web 文章标签： html css css3

于 2024-03-13 18:09:44 首次发布

本文链接：https://blog.csdn.net/fengchengwu2012/article/details/136687530

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、效果展示

2、布局与样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试弹性盒子</title>
</head>
<body>
<div class="out-parent">
    <div class="left">
        <div style="margin: auto">左侧固定180px</div>
    </div>
    <div class="middle">
        <div style="margin: auto">中间固定伸缩</div>
    </div>
    <div class="right">
        <div style="margin: auto">右侧固定150px</div>
    </div>
</div>
</body>
<style>
    /**将父容器作为一个弹性盒子，左中右弹性布局*/
    .out-parent {
        display: flex;
        background: aquamarine;
        width: 100%;
        height: 200px;
    }

    /** display: flex; justify-items: center;   align-items: center;  将左侧div仍然看做一个盒子，内部弹性布局  */
    .left {
        flex: 0 0 180px;
        background: cadetblue;
        height: 100%;
        text-align: center;
        display: flex;
        justify-items: center;
        align-items: center;
    }

    .middle {
        flex: 1;
        background: darkmagenta;
        height: 100%;
        text-align: center;
        display: flex;
        justify-items: center;
        align-items: center;
    }

    .right {
        flex: 0 0 150px;
        background: coral;
        height: 100%;
        text-align: center;
        display: flex;
        justify-items: center;
        align-items: center;
    }
</style>
</html>