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

news2024/11/20 14:15:27

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1514063.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！