CSS三列布局、自适应

最新推荐文章于 2022-11-08 09:38:03 发布

原创最新推荐文章于 2022-11-08 09:38:03 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #chrome devtools #chrome

CSS三列布局、自适应

首先写一个父级div，再写三个子级别div（左、中、右），如下：

<body>
<div class="all">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
</body>

css中，父级元素设置flex，子集元素的左右块固定，中间块设置成弹性布局

<style>
        .all{
            display: flex;
        }
        .left,
        .right{
            width: 50px;
            height: 100px;
            background-color: #54a0ff;
        }
        .middle {
            flex: 1;
            background-color: #f12f04;
        }
    </style>